Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #609718

    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

    #610064

    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

    #610078

    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

    #611139

    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

    #611140

    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

    #613813

    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>
    #615699

    Hey!

    Great! Let us know if you need anything else.

    Regards,
    Ismael

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.