How to attach continuity arrows to a jerry carrousel?

0

Good day, how could I put continuity arrows to this plugin? Menu Slide "since I'm going to place 15 items in the list and would like to see those that are possible within the given width of a screen.

THANKS

    
asked by Joel Sulca Cordova 21.02.2017 в 22:23
source

1 answer

0

Good Joel Sulca Cordova, After seeing the plugin running and giving it a couple of laps I see an easy and fast solution. Surely it can be done in another way and packaging the inside of the same plugin.

Well there goes:

1st we add a bit of css to the container of the element ul, to the ul and to the li.

.drawer-items{width: auto !important;}
.drawer-items ul {
   margin: 0px;
   padding: 0px;
}
.drawer-items li {
   float: none !important;
   list-style: none;
   margin-left: 0px;
   width: 200px;
   display: table-cell !important;
}

2º What we will do is move the first element to the last one (When we click on the arrow to the right) and the last one to put on the first one (When we click on the arrow on the left). For this we will have these javascript lines:

 function MoverLista(derecha){
    var ul = $('.drawer-items>ul');
    //para la derecha
    if(derecha) 
        ul.children('li:first-child').appendTo(ul);
    else 
      ul.children('li:last-child').prependTo(ul);
    //para la izquierda
 }

3º Now we need to introduce two html elements that work like the arrows and that when clicked execute this function. For example doing something like this:

<div class="drawer-content">
        <div class="drawer-navigation">
            <a class="drawer-left" href="javascript:MoverLista(false)">Izquierda</a>
            <a class="drawer-right"href="javascript:MoverLista(true)">Derecha</a>
        </div>
        <div class="drawer-items"> 
            <ul>...

5th If we also add some css to our .drawer-navigation, like here:

.drawer-navigation{ 
    width: 100%;  
    position: relative;
}
.drawer-navigation a{
    position:absolute;
    top:0px;
    height: 140px;
    width:100px;
    display: block; 
    color:orange;
    background: rgba(0,0,0,0.3)
} 
.drawer-navigation a:hover{
    background: orange;
    color:black;
}
.drawer-navigation a.drawer-left{
    left:0px;
}
.drawer-navigation a.drawer-right{
    right:0px !important;
}

We'll see something like this:

We can define an icon, image ... for the arrows, but in question we will already have the element slider running. I hope it serves you.

    
answered by 24.02.2017 / 11:14
source