Slide Page Template slider customization

[findanish]

Is there anyway I can customize the slider on the homepage ? The images on the slider are not responsive. When I resize the browser or view the site in a mobile device the image is cut from the sides. I also want to add in a timer of 4000ms between images.

[SeaTheme]

Hi,

The slider need to cut of image to fill the screens.

If you want to make the slider autoplay, find js/custom.theme.js, find line 334:
slideshow: false,
update to:
slideshow: true,

If change the slider speed, find The slider template: ../center/template/page/content-tamplate.php
find line 19:
<div class="flexslider" data-control="false" data-direction="false" data-speed="4">
change date-speed, 4 = 4 seconds

Best

[findanish]

My client definitely wants it responsive. Is there no way to do it ?
I also tried using layerslider but the first slide always goes all the way to the left side before changing to the 2nd slide when I use full width. 2nd slide seems to be fine. This happens with almost every slider plugin i have used.

Screenshot : http://s7.postimg.org/8q6uslc1n/slider.png

[findanish]

Please help!

[SeaTheme]

Please try to use Page builder, insert Slider module, choose Flexslider

[findanish]

That is working fine in terms of responsiveness. How can I add a text layer over an image?

[findanish]

Could you please help me widen the container of the slider to look like default? Please check screenshot.

Changing width of entry.container is not helping. It moves to the right side.

http://s7.postimg.org/set2rzgez/slider2.png

[SeaTheme]

please leave your wp-admin(url/user/pass) as private reply (the page url at least). I’ll find if there is solution.

[SeaTheme]

It’s what I did on your page:

activate Page Builder, use fullwidth wrap(set “Fit Content to Fullwidth”, set anchor name: slider),

insert Text Block into the fullwrap

add the css to last line of style.css:
#slider.fullwidth-wrap {padding: 0 60px;}

[findanish]

Thank you so much ! That works like a charm. Sorry I am newb 🙂

[Gogmeweb]

Hi, tried to use the info above to give the slider an ‘autoplay’ function, but it doesn’t work (for me). Is this info outdated, or am I missing something else?

While on the subject of this flexslider: is there a way to make the ‘next’ and ‘previous’ arrows more visible without changing the colors in the WP admin (and they’ll change all over the site)?

[SeaTheme]

Hi,

tried to use the info above to give the slider an ‘autoplay’ function, but it doesn’t work (for me). Is this info outdated, or am I missing something else?

Which slider you mentioned, please paste a page url with the slider

While on the subject of this flexslider: is there a way to make the ‘next’ and ‘previous’ arrows more visible without changing the colors in the WP admin (and they’ll change all over the site)?

Please use custom css to change the arrow colour, login wp-admin(Center / General Settings / Custom Css ):
.flex-direction-nav a[class*="flex-"] {color:#000; }

[Gogmeweb]

This reply has been marked as private.

[SeaTheme]

Hi, this topic talked the slider on homepage, not Flexslider in Pagebuilder(Slider moudle)

In Flexslider, it is “autoplay” if enter a number(like:2, means 2 seconds), it will autoplay by 2 seconds. don’t change any files:
https://www.dropbox.com/s/62houcfrfa60gln/QQ20171005-103323%402x.jpg?dl=0

For the custom css, enter here:
click here: https://www.dropbox.com/s/1npf7wbdlrx6is1/QQ20171005-104119%402x.jpg?dl=0
click: Extra CSS

[Gogmeweb]

That’s much better.

Thanks for the great support.

[danileonscl]

Hi, I have for the moment “start 6 – arnold theme” activated on my website ,,, start slide. But it doesn’t work responsively … I mean, it works when the device is horizontal but not vertical ,,, the image is cut off. Tried with page builder (module slide) but it doesn’t work, image still cuts off. This is my website https://buenapista.cl/

thanks.

[SeaTheme]

Hi,

Please paste the custom CSS code to “Appearance > Customize: Additional CSS”:

@media(orientation: portrait) {
  .top-slider, .top-slider .carousel-img-wrap, .top-slider .carousel-des-wrap {
    height: 50vh;
  }
  .top-slider {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
 }
}

ps: please open a new ticket at https://seatheme.net/forums/forum/arnold-wordpress-theme/
if you have a new question

Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook

[Author]

Posts