Метод создания слайдера jQuery не запускается - PullRequest
Новая
       43

Метод создания слайдера jQuery не запускается

0 голосов
/ 06 октября 2018

A аналогичный вопрос был задан об этой проблеме, но это было для мобильного слайдера .В моем случае проблема возникает и в компьютере.

Проблема может быть замечена здесь (не для мобильных устройств, прямо сейчас), где ползунок не имеет начального значения.В то время как при его перемещении у ползунка есть значение.

Это происходит даже после того, как я поместил какой-то текст в ползунок.Код: 

$( "#slider" ).slider({
        create: function() {
        handle.text(1911+'');

        },
      slide: function( event, ui ) {
        var curr_val = parseInt(ui.value) ;
        ...

Это означает, что событие create не запускается.

Я использую Jekyll для создания этого сайта.Итак, у меня есть шаблон с кодом: 

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <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 src="jquery.ui.touch-punch.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">


</head>
<style>
.background1
{
    background-color:black ;
    height: 100%;
    width: 100%;
    text-align: center ;
}
.background2
{

    background-color:white ;
    height: 100%;
    width: 100%;
    text-align: center ;
    padding-top: 70px ; 
}
#navbarBrand
{
    color:black;
    letter-spacing:10px ;
}
.navbar-custom {
    z-index:999999;  /* here I fixed an issue where the collapsed navbar showed up underneath the slider under it*/
    width:100% ;
    position: fixed; 
    background-color: white;
}
</style>
<body>
    <nav class="navbar navbar-default navbar-fixed-top navbar-custom">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#" id="navbarBrand">INFER</a>
            </div>
            <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-outline-dark" onClick="document.getElementById('b2').scrollIntoView();"> DATASET</button>
            <button type="button" class="btn btn-outline-dark" onClick="document.getElementById('b4').scrollIntoView();"> PROJECTS</button>
            <button type="button" class="btn btn-outline-dark" onClick="document.getElementById('b5').scrollIntoView();"> ABOUT</button>
            </div>
        </div>

    </nav>
    <div class="background2">
        {{content}}
    </div>
</body>
<html>

Обратите внимание на {{content}}.Это заменяется на: 

---
layout: post
title: "Jammu And Kashmir GIFs"
---

  <style>
   #slider
   {
     width: 80%;
     margin: 0 auto;
   }
  #custom-handle {
    width: 3.5em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
    font-size: 120% ;
  }
  </style>

  <script>
    $( function() {
            $( "#slider" ).slider({
                max: 88
            });

        var handle = $( "#custom-handle" );

        $( "#slider" ).slider({
        create: function() {
        handle.text(1911+'');

        },
      slide: function( event, ui ) {
        var curr_val = parseInt(ui.value) ;


        handle.text( (Number    (ui.value)+1911)+'' );

        if(curr_val<5)
            $('.carousel').carousel(0) ;
        else if(curr_val<10)
            $('.carousel').carousel(1) ;
        else if(curr_val<15)
            $('.carousel').carousel(2) ;
        else if(curr_val<20)
            $('.carousel').carousel(3) ;
        else if(curr_val<25)
            $('.carousel').carousel(4) ;
        else if(curr_val<30)
            $('.carousel').carousel(5) ;
        else if(curr_val<35)
            $('.carousel').carousel(6) ;
        else if(curr_val<40)
            $('.carousel').carousel(7) ;
        else if(curr_val<45)
            $('.carousel').carousel(8) ;
        else if(curr_val<50)
            $('.carousel').carousel(9) ;
        else if(curr_val<55)
            $('.carousel').carousel(10) ;
        else if(curr_val<60)
            $('.carousel').carousel(11) ;
        else if(curr_val<65)
            $('.carousel').carousel(12) ;
        else if(curr_val<70)
            $('.carousel').carousel(13) ;
        else if(curr_val<75)
            $('.carousel').carousel(14) ;
        else if(curr_val<80)
            $('.carousel').carousel(15) ;
        else if(curr_val<85)
            $('.carousel').carousel(16) ;
        else if(curr_val<90)
            $('.carousel').carousel(17) ;

        }
        });
    } );
    </script>    
<div id="carouselExampleIndicators" class="carousel slide" data-interval="false" >

  <div class="carousel-inner" style="width:50%; height:80%; margin: 0 auto;">
    <div class="carousel-item active">
        <img class="d-block w-100" src="/infer/assets/1911-1915.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img  class="d-block w-100" src="/infer/assets/1916-1920.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img  class="d-block w-100" src="/infer/assets/1921-1925.jpg" alt="Third slide">
    </div>
    <div class="carousel-item">
      <img  class="d-block w-100" src="/infer/assets/1926-1930.jpg" alt="Fourth slide">
    </div>
    <div class="carousel-item">
      <img  class="d-block w-100" src="/infer/assets/1931-1935.jpg" alt="Fifth slide">
    </div>
    <div class="carousel-item">
      <img  class="d-block w-100" src="/infer/assets/1936-1940.jpg" alt="Sixth slide">
    </div>
    <div class="carousel-item">
      <img  class="d-block w-100" src="/infer/assets/1941-1945.jpg" alt="Seventh slide">
    </div>
    <div class="carousel-item">
      <img  class="d-block w-100" src="/infer/assets/1946-1950.jpg" alt="Eighth slide">
    </div>
    <div class="carousel-item">
      <img  class="d-block w-100" src="/infer/assets/1951-1955.jpg" alt="Ninth slide">
    </div>
    <div class="carousel-item">
      <img  class="d-block w-100" src="/infer/assets/1956-1960.jpg" alt="Tenth slide">
    </div>
    <div class="carousel-item">
      <img  class="d-block w-100" src="/infer/assets/1961-1965.jpg" alt="Eleventh slide">
    </div>
    <div class="carousel-item">
      <img  class="d-block w-100" src="/infer/assets/1966-1970.jpg" alt="Twelfth slide">
    </div>
    <div class="carousel-item">
      <img  class="d-block w-100" src="/infer/assets/1971-1975.jpg" alt="Thirteenth slide">
    </div>
    <div class="carousel-item">
      <img  class="d-block w-100" src="/infer/assets/1976-1980.jpg" alt="Fourteenth slide">
    </div>
    <div class="carousel-item">
      <img  class="d-block w-100" src="/infer/assets/1981-1985.jpg" alt="Fifteenth slide">
    </div>
    <div class="carousel-item">
      <img  class="d-block w-100" src="/infer/assets/1986-1990.jpg" alt="Sixteenth slide">
    </div>
    <div class="carousel-item">
      <img  class="d-block w-100" src="/infer/assets/1991-1995.jpg" alt="Seventeenth slide">
    </div>
    <div class="carousel-item">
      <img  class="d-block w-100" src="/infer/assets/1996-1999.jpg" alt="Eighteenth slide">
    </div>
  </div>
  <a class="carousel-control-prev" 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" 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>
    <p id="para">
    </p>

</div>
<div id="slider">
    <div id="custom-handle" class="ui-slider-handle">

    </div>
</div>

Любая помощь по этому поводу?

Ответы [ 2 ]

0 голосов
/ 07 октября 2018

Проблема заключалась в том, что я дважды вызывал ползунок в своем коде.Таким образом, событие create было запущено только для первого, а не для второго.Все, что мне нужно было сделать, это удалить первый слайдер и добавить max: 88 ко второму.Событие create сработало счастливо после.

0 голосов
/ 06 октября 2018

Я думаю, вы делаете это слишком сложным.Рассмотрим следующее: 

$(function() {
  var handle = $("#custom-handle");
  $("#slider").slider({
    create: function() {
      handle.text(1911 + '');
    },
    min: 0,
    max: 17,
    slide: function(event, ui) {
      var curr_val = parseInt(ui.value);
      $('.carousel').carousel(curr_val);
    }
  });
});

Это инициализирует и работает, как ожидалось.Теперь, если вы хотите, чтобы ползунок был максимум 100, вы можете искать кратные 5, используя оператор модуля. 

$(function() {
  var handle = $("#custom-handle");
  $("#slider").slider({
    create: function() {
      handle.text(1911 + '');
    },
    min: 0,
    max: 88,
    slide: function(event, ui) {
      var curr_val = parseInt(ui.value);
      if(curr_val % 5 == 0){
        var val = curr_val / 5;
        $('.carousel').carousel(val);
      }
    }
  });

Полный пример: 

.background1 {
  background-color: black;
  height: 100%;
  width: 100%;
  text-align: center;
}

.background2 {
  background-color: white;
  height: 100%;
  width: 100%;
  text-align: center;
  padding-top: 70px;
}

#navbarBrand {
  color: black;
  letter-spacing: 10px;
}

.navbar-custom {
  z-index: 999999;
  /* here I fixed an issue where the collapsed navbar showed up underneath the slider under it*/
  width: 100%;
  position: fixed;
  background-color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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 src="jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<nav class="navbar navbar-default navbar-fixed-top navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#" id="navbarBrand">INFER</a>
    </div>
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-outline-dark" onClick="document.getElementById('b2').scrollIntoView();"> DATASET</button>
      <button type="button" class="btn btn-outline-dark" onClick="document.getElementById('b4').scrollIntoView();"> PROJECTS</button>
      <button type="button" class="btn btn-outline-dark" onClick="document.getElementById('b5').scrollIntoView();"> ABOUT</button>
    </div>
  </div>

</nav>
<div class="background2">
  <style>
    #slider {
      width: 80%;
      margin: 0 auto;
    }
    
    #custom-handle {
      width: 3.5em;
      height: 1.6em;
      top: 50%;
      margin-top: -.8em;
      text-align: center;
      line-height: 1.6em;
      font-size: 120%;
    }
  </style>
  <script>
    $(function() {
      var handle = $("#custom-handle");
      $("#slider").slider({
        create: function() {
          handle.text(1911 + '');
        },
        min: 0,
        max: 89,
        slide: function(event, ui) {
          var curr_val = parseInt(ui.value);
          if (curr_val % 5 == 0) {
            var val = curr_val / 5;
            console.log(ui.value, val);
            $('.carousel').carousel(val);
          }
        }
      });
    });
  </script>
  <div id="carouselExampleIndicators" class="carousel slide" data-interval="false">
    <div class="carousel-inner" style="width:50%; height:80%; margin: 0 auto;">
      <div class="carousel-item active">
        <img class="d-block w-100" src="/infer/assets/1911-1915.jpg" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="/infer/assets/1916-1920.jpg" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="/infer/assets/1921-1925.jpg" alt="Third slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="/infer/assets/1926-1930.jpg" alt="Fourth slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="/infer/assets/1931-1935.jpg" alt="Fifth slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="/infer/assets/1936-1940.jpg" alt="Sixth slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="/infer/assets/1941-1945.jpg" alt="Seventh slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="/infer/assets/1946-1950.jpg" alt="Eighth slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="/infer/assets/1951-1955.jpg" alt="Ninth slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="/infer/assets/1956-1960.jpg" alt="Tenth slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="/infer/assets/1961-1965.jpg" alt="Eleventh slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="/infer/assets/1966-1970.jpg" alt="Twelfth slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="/infer/assets/1971-1975.jpg" alt="Thirteenth slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="/infer/assets/1976-1980.jpg" alt="Fourteenth slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="/infer/assets/1981-1985.jpg" alt="Fifteenth slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="/infer/assets/1986-1990.jpg" alt="Sixteenth slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="/infer/assets/1991-1995.jpg" alt="Seventeenth slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="/infer/assets/1996-1999.jpg" alt="Eighteenth slide">
      </div>
    </div>
    <a class="carousel-control-prev" 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" 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>
    <p id="para">
    </p>

  </div>
  <div id="slider">
    <div id="custom-handle" class="ui-slider-handle">
    </div>
  </div>
</div>
...