0

I am trying to accomplish the following:

I have a content type that contains title, img and body.

i want to show the nodes in a slideshow, like for example flexslider.

Nothing special so far.

i now want to show 3 slides at once, the 3 slides cover 100% width, where the 1st slide is the previous slide, the middle one is the active slide and the 3rd one is the next slide. (The 1st and 3rd slide have some opacity on them to mark the active slide)

i have tried to do this with flexslider, jcarousel and jquery cycle but without aky success.

I managed to show 3 slides at once, but then i cannot navigate through the slides.

Any suggestions on how you guys would approach this would be very welcome!

Thanks in advance!

Edit:

After some more research i created 3 flexsliders (each in their own content pane) that i put into one page manager page. I then floated them next to each other.

I configred each flex slider to skip 0,1 and 2 slides accordingly.

I now still have the remaining issue of controlling the 3 slideshows through one next and previous buttons.

Any suggestions for this would be very welcome!

0

Edit2:

I found the solution by studying the flexslider module. You can manipulate sliders by #ID with the following commands:

(function ($) {
$(document).ready(function(){
$(".page-about-livio #flexslider-2 .flex-next").click(function() {
    $('#flexslider-1').flexslider("next");  //Go to next slide
    $('#flexslider-3').flexslider("next");
});
$(".page-about-livio #flexslider-2 .flex-prev").click(function() {
    $('#flexslider-1').flexslider("prev");  //Go to next slide
    $('#flexslider-3').flexslider("prev");
});
});
})(jQuery);
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.