Layout Template: Slider, any way to hide or put transparency on side pics?

[dudeins]

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/

[SeaTheme]

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.com – Twitter – Facebook

[dudeins]

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

[SeaTheme]

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; }

[dudeins]

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.

[SeaTheme]

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; }
}

[dudeins]

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.

[dudeins]

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.

[SeaTheme]

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.

[dudeins]

This reply has been marked as private.

[SeaTheme]

Hi, replied your mail.

[jameswhitty]

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!

[SeaTheme]

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

[jameswhitty]

This reply has been marked as private.

[SeaTheme]

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

[jameswhitty]

This reply has been marked as private.

[SeaTheme]

uiueux@gmail.com

[Author]

Posts