Carousel horizontal scrolling

[ghost]

Hello,

using the great plugin, all works great so far. I've checked all options, but could not find this one.

How would i scroll the carousel (on mousehover) horizontally like here: http://www.convergent-evolution.co.uk/resources/jquery-plugins/scrolling-carousel/

Here is my setup: http://pastebin.com/YZ2DmTs0

Which function do i need to add or modify in the js? Thank you in advance. If you need more information let me know.

Greetings, snlbase

[mattyza]

Hi snlbase,

Thanks for your query. :)

The example you've provided would require quite a bit of extra logic, as I see it.

The horizontal example shows a "parallax" style scroll, where it scrolls constantly when the mouse is hovering over it. When the mouse is over the carousel, it "grabs" the carousel and moves it according to the mouse movement.

Currently, this is not something that FlexSlider can do on it's own, unfortunately.

If you arrive at a solution, please do advise via this ticket. :)

Thanks and regards, Matty.

[ghost]

Hey Matty,

Well interesting, lol? If i come up with a solution...did you read my request at all? Actually i was hoping that the creator of this great plugin would have an idea which function to modify in his own js. To integrate parallax style scroll, which function in the js would i need to change or create, so it won't interfere with other functions in the plugin? That was more the question.

Regards, snlbase

Am 17.05.2013 15:09, schrieb Matty:

Hi snlbase,

Thanks for your query. :)

The example you've provided would require quite a bit of extra logic, as I see it.

The horizontal example shows a "parallax" style scroll, where it scrolls constantly when the mouse is hovering over it. When the mouse is over the carousel, it "grabs" the carousel and moves it according to the mouse movement.

Currently, this is not something that FlexSlider can do on it's own, unfortunately.

If you arrive at a solution, please do advise via this ticket. :)

Thanks and regards, Matty.

— Reply to this email directly or view it on GitHub https://github.com/woothemes/FlexSlider/issues/676#issuecomment-18060283.

[ghost]

Also, payment can be discussed for the integration of that feature. But it is really needed in this project. So please let me know.

[mattyza]

You shouldn't need to modify FlexSlider's JavaScript at all. It can be a layer on top of FlexSlider. I'm not exactly certain, off-hand, of the logic you'd need to apply to determine when to move the slider. The flexAnimate() method is the method you'd use to animate the slider though.

I hope this helps. If I can be of further assistance, I'll do my best to do so. :)

[ghost]

Yeah! That's the spirit! Exactly what i was asking for. Thank you for pointing into the right direction. So it can be a layer in on top? Am i assuming right, you mean something like this:

$("#carousel li").hover(
            function () {
                $('.flexslider').flexslider("pause");
                $('.flexslider').flexslider($(this).index());
                //slide logic here
              }, 
              function () {
                $('.flexslider').flexslider("play");
              }
        );

Will try to approach this now with the layer as you suggested. The thing is its all smooth and functioning right now, only need to add this thingy. Thank you for replying and assistance. I don't think it will be that difficult to manage. It might also be useful for others, so i will post all code here as we go through this.

Alright, here is my html setup. Currently working with PyroCMS, so dont worry about all these Lex tags. In the end source they just output the img tag. All works perfectly.

<div id="slider" class="flexslider">
    <ul class="slides">
        <li>
            {{ theme:image file="slideshow/s1.jpg" alt="TMFV1" class="scaler" }}
            <h5 class="flex-caption">
                <span style="float:left;"><?php echo lang('welcome:main') ?></span>
                <span class="welcomeadd"><?php echo lang('welcome:add1') ?></span>
            </h5>
        </li>   

        <li>
            {{ theme:image file="slideshow/s2.jpg" alt="TMFV2" class="scaler" }}
            <h5 class="flex-caption">
                <span style="float:left;"><?php echo lang('welcome:main') ?></span>
                <span class="welcomeadd"><?php echo lang('welcome:add2') ?></span>
            </h5>
        </li>   

        <li>
            {{ theme:image file="slideshow/s3.jpg" alt="TMFV3" class="scaler" }}
            <h5 class="flex-caption">
                <span style="float:left;"><?php echo lang('welcome:main') ?></span>
                <span class="welcomeadd"><?php echo lang('welcome:add3') ?></span>
            </h5>
        </li>   

        <li>
            {{ theme:image file="slideshow/s4.jpg" alt="TMFV4" class="scaler" }}
            <h5 class="flex-caption">
                <span style="float:left;"><?php echo lang('welcome:main') ?></span>
                <span class="welcomeadd"><?php echo lang('welcome:add4') ?></span>
            </h5>
        </li>

        <li>
            {{ theme:image file="slideshow/s5.jpg" alt="TMFV5" class="scaler" }}
            <h5 class="flex-caption">
                <span style="float:left;"><?php echo lang('welcome:main') ?></span>
                <span class="welcomeadd"><?php echo lang('welcome:add5') ?></span>
            </h5>
        </li>   

        <li>
            {{ theme:image file="slideshow/s6.jpg" alt="TMFV6" class="scaler" }}
            <h5 class="flex-caption">
                <span style="float:left;"><?php echo lang('welcome:main') ?></span>
                <span class="welcomeadd"><?php echo lang('welcome:add6') ?></span>
            </h5>
        </li>   

        <li>
            {{ theme:image file="slideshow/s7.jpg" alt="TMFV7" class="scaler" }}
            <h5 class="flex-caption">
                <span style="float:left;"><?php echo lang('welcome:main') ?></span>
                <span class="welcomeadd"><?php echo lang('welcome:add7') ?></span>
            </h5>
        </li>   

        <li>
            {{ theme:image file="slideshow/s8.jpg" alt="TMFV8" class="scaler" }}
            <h5 class="flex-caption">
                <span style="float:left;"><?php echo lang('welcome:main') ?></span>
                <span class="welcomeadd"><?php echo lang('welcome:add8') ?></span>
            </h5>
        </li>   

        <li>
            {{ theme:image file="slideshow/s9.jpg" alt="TMFV9" class="scaler"  }}
            <h5 class="flex-caption">
                <span style="float:left;"><?php echo lang('welcome:main') ?></span>
                <span class="welcomeadd"><?php echo lang('welcome:add9') ?></span>
            </h5>
        </li>   

        <li>
            {{ theme:image file="slideshow/s10.jpg" alt="TMFV10" class="scaler" }}
            <h5 class="flex-caption">
                <span style="float:left;"><?php echo lang('welcome:main') ?></span>
                <span class="welcomeadd"><?php echo lang('welcome:add10') ?></span>
            </h5>
        </li>   
    </ul>
</div>

<div id="carousel" class="flexslider">
  <ul class="slides">
        <li>{{ theme:image file="slideshow/thumbs/ths1.jpg" width="210" height="40" alt="TMPV1" }}</li>
        <li>{{ theme:image file="slideshow/thumbs/ths2.jpg" width="210" height="40" alt="TMPV2" }}</li>
        <li>{{ theme:image file="slideshow/thumbs/ths3.jpg" width="210" height="40" alt="TMPV3" }}</li>
        <li>{{ theme:image file="slideshow/thumbs/ths4.jpg" width="210" height="40" alt="TMPV4" }}</li>
        <li>{{ theme:image file="slideshow/thumbs/ths5.jpg" width="210" height="40" alt="TMPV5" }}</li>
        <li>{{ theme:image file="slideshow/thumbs/ths6.jpg" width="210" height="40" alt="TMPV6" }}</li>
        <li>{{ theme:image file="slideshow/thumbs/ths7.jpg" width="210" height="40" alt="TMPV7" }}</li>
        <li>{{ theme:image file="slideshow/thumbs/ths8.jpg" width="210" height="40" alt="TMPV8" }}</li>
        <li>{{ theme:image file="slideshow/thumbs/ths9.jpg" width="210" height="40" alt="TMPV9" }}</li>
        <li>{{ theme:image file="slideshow/thumbs/ths10.jpg" width="210" height="40" alt="TMPV10" }}</li>
   </ul>
</div>

And here is the js call:

$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: true,
    directionNav: false,    
    mousewheel: false,              
    slideshow: false,
    itemWidth: 210,
    itemMargin: 0,    
    asNavFor: '#slider'
  });

 $('#slider').flexslider({
    initDelay: 2500,
    animation: "fade",
    controlNav: false,
    mousewheel: false,  
    directionNav: false,                
    slideshowSpeed: 7500,         
    animationDuration: 3000, 
    animationLoop: true,
    keyboardNav: false, 
    slideshow: true,
    randomize: false,
    sync: "#carousel"
  });

Greetings snlbase

[mattyza]

Hi snlbase,

It looks like jQuery's mousemove() event should do the trick, here. http://api.jquery.com/mousemove/

You'd also check if the cursor is currently hovering over your slideshow. You could get the cursor position, compare it to where it was previously and you'd see in which direction the cursor was moving. From there, I'd imagine you could invert the direction and slide the slides container that way.

Are you looking at using the parallax effect? If so, I'd say the movement of the slides container would need to be done using separate logic (you'd also need to ensure that the currentSlide in view is updated within the FlexSlider object as the slides container moves).

I hope this helps in providing some direction.

[ghost]

Hey mattyza,

got it partially working now! The carousel scrolling horizontally and reacts to the mouse movement. This requires scrollingcarousel2.0.js from the previous link above: http://www.convergent-evolution.co.uk/resources/jquery-plugins/scrolling-carousel/

Implement script:

<script type="text/javascript" src="/js/scrollingcarousel.2.0.min.js"></script>

The jQuery:

$(document).ready(function(){   
  $('#carousel').scrollingCarousel();
});

Add to CSS:

#carousel li { 
    background: none; 
    top:0;
    margin:-15px 10px 0 0;
    width:200px;
    height:40px;
    padding:2px;
    list-style: none;
    display: block; 
}

Also in order to work, the default class="slides" needs to be removed from the ul:

Before:

<div id="carousel" class="flexslider">
  <ul class="slides">
...

After:

<div id="carousel" class="flexslider">
  <ul>
...

All works beautifully now. The only 2 things left are:

1. The click event disappeared
2. The sync with slider not working

Can you help me to hook the sync function to that construct?

Greetings snlbase

[mattyza]

Hi snlbase,

My sincerest apologies for the delay in getting back to you on this.

In terms of sync, I don't think that's possible without a significant amount of extra JavaScript. As you're not using FlexSlider on the carousel, but a different script, you'd need code in place to check when an item goes from being "invisible" to "visible". There doesn't seem to be an event or an exposed method in the "scrollingcarousel" script to identify that event.

In terms of the carousel click, you could bind a "click" event to each item of the scrolling carousel. When clicked, you'd get the current index of that item and call FlexSlider on your main slider, to switch it to the correct slide.

I hope this helps. :)

Thanks and regards, Matty.