Veljko Stefanovic Veljko Stefanovic - 2 months ago 4
Javascript Question

How to make reverse scrolling identical as one going to "right" direction on my "Frankensteinian" bootstrap carousel?

My predicament is how to make slider below carousel slide in similar fashion as from right to left but in reverse style? Slider is activated through carousel arrows. When pressed(right arrow) slider performs flawlessly. But when it's activated by left arrow after going through couple of cycles, it goes haywire ... I know i'm close just need little push in right direction ...

Here's my jsfiddle: https://jsfiddle.net/veljkos82/t2a0t9tf/94/ and below is code for a function that should control work of left arrow "properly", but it doesn't ... I'm using XAMPP v3.2.2 ..

My html:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="indicatorsofcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="indicatorsofcarousel.css">


</head>
<body>

<div class="container text-center">

<br>
<div id="myCarousel" class="carousel" data-ride="carousel" data-interval="false"><!-- Ako se ukloni .slide klasa onda nema animacije i koliko god da se brzo klikce na strelice karusel i donji slajdovi se savrseno poravnjaju. -->


<!-- Wrapper for slides -->
<div id="pics" class="carousel-inner" role="listbox">
<div class="item active">
<img src="img\img1.jpg" alt="Chania"><br><span class="toggle">0</span>
</div>

<div class="item">
<img src="img\img2.jpg" alt="Chania"><br><span class="toggle">1</span>
</div>

<div class="item">
<img src="img\img3.jpg" alt="Flower"><br><span class="toggle">2</span>
</div>

<div class="item">
<img src="img\img4.jpg" alt="Flower"><br><span class="toggle">3</span>
</div>

<div class="item">
<img src="img\img5.jpg" alt="Flower"><br><span class="toggle">4</span>
</div>

<div class="item">
<img src="img\img6.jpg" alt="Flower"><br><span class="toggle">5</span>
</div>

<div class="item">
<img src="img\img7.jpg" alt="Chania"><br><span class="toggle">6</span>
</div>

<div class="item">
<img src="img\img8.jpg" alt="Chania"><br><span class="toggle">7</span>
</div>

<div class="item">
<img src="img\img9.jpg" alt="Flower"><br><span class="toggle">8</span>
</div>

<div class="item">
<img src="img\img10.jpg" alt="Flower"><br><span class="toggle">9</span>
</div>

<div class="item">
<img src="img\img11.jpg" alt="Flower"><br><span class="toggle">10</span>
</div>

<div class="item">
<img src="img\img12.jpg" alt="Flower"><br><span class="toggle">11</span>
</div>

<div class="item">
<img src="img\img13.jpg" alt="Flower"><br><span class="toggle">12</span>
</div>

<div class="item">
<img src="img\img14.jpg" alt="Flower"><br><span class="toggle">13</span>
</div>

<div class="item">
<img src="img\img15.jpg" alt="Flower"><br><span class="toggle">14</span>
</div>

<div class="item">
<img src="img\img16.jpg" alt="Flower"><br><span class="toggle">15</span>
</div>

<div class="item">
<img src="img\img17.jpg" alt="Chania"><br><span class="toggle">16</span>
</div>

<div class="item">
<img src="img\img18.jpg" alt="Chania"><br><span class="toggle">17</span>
</div>

<div class="item">
<img src="img\img19.jpg" alt="Flower"><br><span class="toggle">18</span>
</div>

<div class="item">
<img src="img\img20.jpg" alt="Flower"><br><span class="toggle">19</span>
</div>

</div>

<!-- Left and right controls -->
<a id="prev" onclick="left()" class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a id="next" onclick="right()" class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

</div>
<div class="text-center">
<div class="pr"></div>
<div class="lnk">


<ol id="lista" class="faceless con1">
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="0"><a href="#"><img class="sl" src="img\img1.jpg" alt="Chania"><br><span class="toggle">0</span></a></li>
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="1"><a href="#"><img class="sl" src="img\img2.jpg" alt="Chania"><br><span class="toggle">1</span></a></li>
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="2"><a href="#"><img class="sl" src="img\img3.jpg" alt="Flower"><br><span class="toggle">2</span></a></li>
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="3"><a href="#"><img class="sl" src="img\img4.jpg" alt="Flower"><br><span class="toggle">3</span></a></li>
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="4"><a href="#"><img class="sl" src="img\img5.jpg" alt="Flower"><br><span class="toggle">4</span></a></li>
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="5"><a href="#"><img class="sl" src="img\img6.jpg" alt="Flower"><br><span class="toggle">5</span></a></li>
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="6"><a href="#"><img class="sl" src="img\img7.jpg" alt="Chania"><br><span class="toggle">6</span></a></li>
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="7"><a href="#"><img class="sl" src="img\img8.jpg" alt="Chania"><br><span class="toggle">7</span></a></li>
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="8"><a href="#"><img class="sl" src="img\img9.jpg" alt="Flower"><br><span class="toggle">8</span></a></li>
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="9"><a href="#"><img class="sl" src="img\img10.jpg" alt="Flower"><br><span class="toggle">9</span></a></li>
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="10"><a href="#"><img class="sl" src="img\img11.jpg" alt="Flower"><br><span class="toggle">10</span></a></li>
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="11"><a href="#"><img class="sl" src="img\img12.jpg" alt="Flower"><br><span class="toggle">11</span></a></li>
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="12"><a href="#"><img class="sl" src="img\img13.jpg" alt="Flower"><br><span class="toggle">12</span></a></li>
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="13"><a href="#"><img class="sl" src="img\img14.jpg" alt="Flower"><br><span class="toggle">13</span></a></li>
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="14"><a href="#"><img class="sl" src="img\img15.jpg" alt="Flower"><br><span class="toggle">14</span></a></li>
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="15"><a href="#"><img class="sl" src="img\img16.jpg" alt="Flower"><br><span class="toggle">15</span></a></li>
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="16"><a href="#"><img class="sl" src="img\img17.jpg" alt="Flower"><br><span class="toggle">16</span></a></li>
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="17"><a href="#"><img class="sl" src="img\img18.jpg" alt="Flower"><br><span class="toggle">17</span></a></li>
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="18"><a href="#"><img class="sl" src="img\img19.jpg" alt="Flower"><br><span class="toggle">18</span></a></li>
<li class="ord_list_elem" data-target="#myCarousel" data-slide-to="19"><a href="#"><img class="sl" src="img\img20.jpg" alt="Flower"><br><span class="toggle">19</span></a></li>
</ol>


</div>

</div>

</div><br>


</body>
</html>


My css:

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 720px;
margin: auto;
}

.tro{
position: relative;

width: 0px;
height: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid brown;

opacity: 0;
}

.sl{
margin: auto;
width: 100px;
}

.sl:hover{
box-shadow: 1px 1px 10px #eaaeae;
-webkit-box-shadow: 1px 1px 10px #eaaeae;
-moz-box-shadow: 1px 1px 10px #eaaeae;
border: 1px solid brown;
}

.faceless{
list-style-type: none;
}

.ord_list_elem{
display:inline-block;
}

.con1{
padding-top: 10px;
width: 720px;
height: 140px;
overflow-y: hidden;
white-space:nowrap;
margin: 0 auto;
}

/*.pr{

position: absolute;
top: 670px;
left: 110px;
height: 30px;
width: 720px;
background-color: white;
opacity: 1;
}*/

.carousel-control.left, .carousel-control.right {
background-image: none
}


My js:

var clicksRight=0;
var clicksLeft=0;
var trini=0;
var gog=0;
var pret=0;
var x=0;
var y=0;
var br=0;
var index=0;
var currentIndex=0;
var clicks=0;
var num=0;
var mr=0;
var tmp=0;
var OldValue = 0;
$( document ).ready(function() {

$( ".sl" ).click(function() {
gog=0;
var width=$( ".sl" ).outerWidth();
var corr=(width/100)*4.4;
width+=corr;
index = $( ".sl" ).index( this );
var count = $('.item').length;
var cnt = $('.sl').length;

document.getElementById("mix1").innerHTML=index;

if(index!=0){
currentIndex=index;
clicksLeft=count-(count-currentIndex);
}

if(index>pret){

if(index==3){
gog=40;
}

if(index>3){
gog=(width*(index-3))+40;
}

$(".con1").animate({scrollLeft: gog});
pret=index;
}

if(index<pret){

if(index==3){
gog=40;
}

if(index>3){
gog=(width*(index-3))+40;
}

$(".con1").animate({scrollLeft: gog});
pret=index;
}


x=$(".sl").eq(index).offset().top;
y=$(".sl").eq(index).offset().left;

br=$(".con1").scrollLeft();
clicksLeft=count-index;

});


});



function right(){
gog=0;
br=$(".con1").scrollLeft();
var width=$( ".sl" ).outerWidth();
currentIndex = $('div.active').index() + 1;
var count = $('.item').length;
var cnt = $('.sl').length;
var corr=(width/100)*4.4;
width+=corr;
var p1=document.getElementById("lista").scrollWidth;
var p2=$("#lista").outerWidth();
var p3=p1-p2;
clicksRight+=1;

if(br==0 && currentIndex>2){
gog=br+((width-15)/2);
$(".con1").scrollLeft(gog);
}

if(br>0){
gog=br+width;
$(".con1").scrollLeft(gog);
}

if(br==p3 && currentIndex==count){
gog=0;
$(".con1").scrollLeft(gog);
clicksRight=0;
}

clicksLeft=count-currentIndex;
document.getElementById("mix").innerHTML=clicksLeft;
document.getElementById("mix1").innerHTML=currentIndex;


}


function left(){
gog==0;
br=$(".con1").scrollLeft();
var width=$( ".sl" ).outerWidth();
var count = $('.item').length;
var cnt = $('.sl').length;
var corr=(width/100)*4;
width+=corr;
var p1=document.getElementById("lista").scrollWidth;
var p2=$("#lista").outerWidth();
var p3=p1-p2;
clicksLeft+=1;

if(br==0 && clicksLeft==1){
gog=p3;
$(".con1").scrollLeft(gog);
//alert("1");
currentIndex=count;
}

if(clicksLeft>4 && br==p3){
gog=br-width;
$(".con1").scrollLeft(gog);
//alert("2");
}

if(clicksLeft>4){
gog=br-width;
$(".con1").scrollLeft(gog);
//alert("3");
}

if(currentIndex==0 && clicksRight>0){
gog=p3;
$(".con1").scrollLeft(gog);
//alert("4");
}

if(clicksLeft>4 && clicksRight>0){
gog=br-width;
$(".con1").scrollLeft(gog);
//alert("5");
}


if(clicksRight>0){
currentIndex-=1;
//alert("6");
}

if(clicksRight==0 && currentIndex>=0){
currentIndex=count-clicksLeft;
//alert("7");
}

if(currentIndex==count && clicksLeft){
gog=p3;
$(".con1").scrollLeft(gog);
//alert("8");
}

if(currentIndex==0){
clicksLeft=0;
//alert("9");
}


document.getElementById("mix").innerHTML=clicksLeft;
document.getElementById("mix1").innerHTML=currentIndex;
}




function funk(){
var brt = $("#lista").find('img.sl:first'); // Ili var brt = $("#lista").find('img.sl') => brt[0]
var count = $('.item').length;

document.getElementById("demo1").innerHTML="br: "+br+"px, currentIndex: "+currentIndex+", clicksLeft: "+clicksLeft;
}

function myFunction() {
var elmnt = document.getElementById("lista");
var x = elmnt.scrollLeft;
document.getElementById ("demo").innerHTML = x;
}

Answer

There's no element with id mix1, that's why javascript gets error and breaks.

Here's working jsfiddle with commented mix1 lines.

function left() {

      if (index != clicks) {
        index = clicks;
      }
      clicks += 1;
      //document.getElementById("mix1").innerHTML = clicks;
      var gog1 = 0;
      var brt = $("#lista").find('img.sl:first');
      //(brt.offset().left==152 || brt.offset().left==55)
      var bry = $("#lista").find('img.sl:last');

      if (clicks > 4) {
        gog1 = $(".con1").scrollLeft() - 105;
        $(".con1").animate({
          scrollLeft: gog1
        });
      }



      if (($(".con1").scrollLeft()) == 0) {

        gog1 = 1396;
        $(".con1").animate({
          scrollLeft: gog1
        });

      }

      //document.getElementById("mix1").innerHTML = clicks;

    }