TutorialMeta
Ad

Make A Slider Based Image Collection

- 1 answer

I want to make a slider based image collection, or one might say a slider based corousel. The slider that I have in mind has specific markings on it, ( say 1990,1995,2000, et cetera), and there is an image corresponding to the range in which the slider currently is (That is, one image for 1990-1995, another one for 1995-2000, and so on). The images are not necessarily to slide in and out of the visual. So, a Bootstrap corousel isn't necessary.

The slider that I am looking into is this, which I'll modify according to my needs.

So, I tried to merge these two concepts. The two elements shown in this fiddle are not attached to each other whatsoever. Then I tried to mess around with the code, but the corousel still seems to be unaffected by the slider's movements.

Here is the code after the messing around: 

<html>
<head>
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 



      <style>
  #custom-handle {
    width: 3em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
  }
  </style>

  <script>
    $( function() {
        var handle = $( "#custom-handle" );
        $( "#slider" ).slider({
        create: function() {
        var slide_number = Number($(this).slider("value"))/34+1 ;
        handle.text( $( this ).slider( "value" ) );
        $("#carouselExampleIndicators").data('slide-to',slide_number) ;
      },
      slide: function( event, ui ) {
        var slide_number = Number(ui.value)/34+1 ;
        handle.text( ui.value );
        $("#corouselExampleIndicators").data('slide-to',slide_number) ;
        }
        });
    } );
    </script>    
</head>
<div id="carouselExampleIndicators" class="carousel slide"  >
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://i.imgur.com/S7Hebtq.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://procutlandscaping.com/blog/wp-content/uploads/2012/06/landscape-design-rockland-county.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://4.bp.blogspot.com/-7Tjc6muCHKc/UIToU_6RXeI/AAAAAAAAC4Q/2iE7Cb0m5ZU/s1600/Beautiful+-Landscape-+HD-+Wallpapers3.jpg" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" target="_blank" rel="nofollow noreferrer" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" target="_blank" rel="nofollow noreferrer" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
    <script>
        $(function(){
          $('#carouselExampleIndicators').carousel();
        });
    </script>
</div>
<div>
     <br><br>
</div>
<div id="slider">
    <div id="custom-handle" class="ui-slider-handle"></div>
</div>
</html>

The main part that is not working is :

<script>
    $( function() {
        var handle = $( "#custom-handle" );
        $( "#slider" ).slider({
        create: function() {
        var slide_number = Number($(this).slider("value"))/34+1 ;
        handle.text( $( this ).slider( "value" ) );
        $("#carouselExampleIndicators").data('slide-to',slide_number) ;
      },
      slide: function( event, ui ) {
        var slide_number = Number(ui.value)/34+1 ;
        handle.text( ui.value );
        $("#corouselExampleIndicators").data('slide-to',slide_number) ;
        }
        });
    } );
    </script>

The errors I get are:

TypeError: Actions[t.getLast(...)] is undefined, can't access property "bind" of it

and

TypeError: $(...).carousel is not a function

The corousel is working fine, therefore I don't understand why the second error is coming. Meanwhile, I don't understand the first error too.

So, my question here is, why this doesn't work?

Secondly, is there a better way to do this?

Thirdly, can I write better code for this?

Any help appreciated!

UPD: Updated fiddle.

UPD: Changed $("#corouselExampleIndicators").data('slide-to',slide_number) ; to $('.corousel').corousel(slider_number) ;, as given here. But this still doesn't work, and the slider has stopped working now. Look at the fiddle here.

Tried to use the id instead of the class, in the code, that is, used $('#corouselExampleIndicators').corousel(1) ;. Still nothing worked.

UPD: If anyone is interested, the final version can be found here. This works flawlessly.

Ad

Answer

I see that you are including many versions of jQuery that conflict with each other and cause an error in the page Uncaught TypeError: $(...).carousel is not a function

So, remove this line

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

And resort the scripts to be

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Update: Due to question updates.

I found another two typo bugs inside your last updated fiddle at the following line:

$('.corousel').corousel(slider_number) ;

It 's carousel not corousel and it's slide_number not slider_number. So, it should be

$('.corousel').carousel(slide_number) ;

Note: The script includes this buggy line twice.

Check new fiddle: http://jsfiddle.net/qmeanog1/

Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad