Home Forums Arnold WordPress Theme Layout Template: Slider, any way to hide or put transparency on side pics?

This topic contains 16 replies, has 3 voices, and was last updated by  BWSM 1 month, 3 weeks ago.

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #12694

    dudeins
    Participant

    Hey guys! Thanks for the awesome theme. I’m using the Layout Template: Slider and was wondering if it would be possible to hide or put a transparency on the picture shown on the right and left of the slider? as shown here: http://themes.uiueux.com/arnold/2016/12/04/inter/

    #12699

    BWSM
    Keymaster

    Hi,

    Thanks, glad you like our theme

    Did you talk the arrow over slider? Please paste the style code to Custom Css(Appearance / Theme Options / Custom Css):

    .single-portfolio-fullwidth-slider .owl-carousel .owl-controls .owl-nav .owl-prev,
    .single-portfolio-fullwidth-slider .owl-prev, .single-portfolio-fullwidth-slider .owl-carousel .owl-controls .owl-nav .owl-next { 
        cursor: default;
    }

    Cheers!
    Bwsm – uiueux.comTwitterFacebook

    #12704

    dudeins
    Participant

    Nope, I want to hide the actual pictures, not the arrows. So that you can always see only one picture at a time.

    #12705

    BWSM
    Keymaster

    Please use the Custom Css(Appearance / Theme Options / Custom Css)

    .single-portfolio-fullwidth-slider .owl-carousel .owl-item .carousel-img-wrap { opacity: 0;  -webkit-transition: opacity .3s; transition: opacity .3s; }
    .single-portfolio-fullwidth-slider .owl-carousel .owl-item.active.center  .carousel-img-wrap { opacity: 1; }
    #12706

    dudeins
    Participant

    Thank you! But now if i resize the website to a smaller size no pictures are visible at one point and on my mobile no pictures are shown.

    #12712

    BWSM
    Keymaster

    welcome!

    please update as:

    @media (min-width: 769px) {
     .single-portfolio-fullwidth-slider .owl-carousel .owl-item .carousel-img-wrap { opacity: 0;  -webkit-transition: opacity .3s; transition: opacity .3s; }
    .single-portfolio-fullwidth-slider .owl-carousel .owl-item.active.center  .carousel-img-wrap { opacity: 1; }
    }
    #12716

    dudeins
    Participant

    Thanks, now i see the slider on my mobile, but when i resize on my computer i dont see the slider between 769px and 1116px width.

    #12717

    dudeins
    Participant

    Actually, i tested a little bit more.

    With both of the codes you gave me in custom css the slider is seen and not seen between following widths.

    Invisible:
    150px – 555px; 768 – 1115px

    Visible:
    556px – 768px; 1116px – after this its always visible.

    #12722

    BWSM
    Keymaster

    Please try to update the css:

    @media (max-width: 767px) {
    .responsive-ux.single-portfolio-fullwidth-slider .owl-carousel, .responsive-ux .single-fullwidth-slider-carousel-img, .responsive-ux .owl-carousel .owl-item img.single-fullwidth-slider-carousel-img, .responsive-ux.single-portfolio-fullwidth-slider .owl-prev, .responsive-ux.single-portfolio-fullwidth-slider .owl-carousel .owl-controls .owl-nav .owl-next, .responsive-ux.single-portfolio-fullwidth-slider .owl-carousel .owl-item img.size-full, .responsive-ux.single-portfolio-fullwidth-slider .owl-carousel .owl-item img.size-arnold-standard-thumb-medium {    width: 100%;
        height: auto; }
    }
    @media (min-width: 769px) {
     .single-portfolio-fullwidth-slider .owl-carousel .owl-item .carousel-img-wrap { opacity: 0;  -webkit-transition: opacity .3s; transition: opacity .3s; }
    .single-portfolio-fullwidth-slider .owl-carousel .owl-item.active.center  .carousel-img-wrap { opacity: 1; }
    }

    If it doesn’t work, please send your wp-admin(url/user/pass) via my profile contact form , I’ll log in to check it.

    #13496

    dudeins
    Participant
    This reply has been marked as private.
    #13500

    BWSM
    Keymaster

    Hi, replied your mail.

    #13752

    jameswhitty
    Participant

    Hi, I have just use the last CSS patch that you posted to adjust the slider… It looks great on everything except when a mobile device is in a portrait orientation then it crops the images.

    It would also be great if I could add keyboard navigation to control the slider…

    Theme looks amazing, Thanks you!

    #13753

    BWSM
    Keymaster

    Hi jameswhitty, could you paste the page url? Thanks!

    #13755

    jameswhitty
    Participant
    This reply has been marked as private.
    #13764

    BWSM
    Keymaster

    Hi, I checked your site, I didn’t find the cropping image issue on portrait mode. Could you paste as screenshot?

    #13766

    jameswhitty
    Participant
    This reply has been marked as private.
    #13772

    BWSM
    Keymaster
Viewing 17 posts - 1 through 17 (of 17 total)

You must be logged in to reply to this topic.