Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 7, 2016 at 4:02 pm #609718
    AukeJomm

    Hi

    I need to change the background of a slider.
    It’s a slider with products for different type of roofs.
    So i want a slider with on every slide a different product but with the same type of roof.
    If the user wants to see the products on a different type roof he should be able to click a button and change the roof.

    I want to do that with background of the slider and a button on the slides where he can select a different background (roof type)
    if this is not possible maybe it could be done with changing the slider when i click the button…

    But the first option is preferred by me.

    Thanks,
    Auke

    April 8, 2016 at 8:08 am #610064
    Rikard

    Hey Auke,

    I’m not sure if that is possible but send us a link to your site and we’ll have a look at it.

    Best regards,
    Rikard

    April 8, 2016 at 8:23 am #610078
    AukeJomm

    Wel, it is not online but here is the slider as it is now. This slider is the “easy slider” with less functionality so i wanted to work with the layer slider with more functionality.

    Let me know!

    Auke

    April 11, 2016 at 11:52 am #611139
    Ismael

    Hi!

    Apply the roof image as background of the slider dots. You can do that with this:

    .avia-slideshow-dots a {
    width: 50px;
    height: 50px;
    border-radius: 0;
    margin: 0 5px;
}

.avia-slideshow-dots {
    bottom: 30px;
}

.avia-slideshow-dots a:nth-child(1) {
    background: url('http://www.zonnepanelen-ess.nl/wordpress/wp-content/uploads/2016/03/4.jpg');
}

.avia-slideshow-dots a:nth-child(2) {
    background: url('http://www.zonnepanelen-ess.nl/wordpress/wp-content/uploads/2016/03/2-1.jpg');
}

    The code above will apply a background image to the first two dots.

    Cheers!
    Ismael

    April 11, 2016 at 11:53 am #611140
    Andy

    Hey!

    try to play around with LayerSlider plugin, but I guess you would need to search for a different plugin for such a function, or even hire a freelance developer for this job.

    Cheers!
    Andy

    April 14, 2016 at 1:07 pm #613813
    AukeJomm

    Thanks all.
    What i did was change the background in the Easy slider full width slider with jQuery.

    Like this

    <script>
jQuery(document).ready(function($) {
	
	  $('#roof_red').click(function() {
	    $('#full_slider_1').css('background-image', 'url(https://www.zonnepanelen-ess.nl/wordpress/wp-content/uploads/2016/04/rode-dakpannen-e1460624616401.png)');
	  });
	  
	  $('#roof_grey').click(function() {
	    $('#full_slider_1').css('background-image', 'url(https://www.zonnepanelen-ess.nl/wordpress/wp-content/uploads/2016/03/dakpan-300x293.jpg)');
	  });
});
</script>

<p align="center"><a href="javascript:void(0);" id="roof_grey">grey</a> | <a href="javascript:void(0);" id="roof_red">red</a></p>
    April 17, 2016 at 6:44 am #615699
    Ismael

    Hey!

    Great! Let us know if you need anything else.

    Regards,
    Ismael

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘[layer slider] Click to set a different slider background or other slider’ is closed to new replies.