मैं एक स्लाइडर आधारित छवि संग्रह बनाना चाहता हूं, या कोई स्लाइडर आधारित कोरसेल कह सकता है। मेरे मन में जो स्लाइडर है, उस पर विशिष्ट चिह्न हैं, (जैसे 1990,1995,2000, वगैरह), और उस सीमा के अनुरूप एक छवि है जिसमें स्लाइडर वर्तमान में है (अर्थात, 1990-1995 के लिए एक छवि) , 1995-2000 के लिए एक और, और इसी तरह)। छवियों को दृश्य के अंदर और बाहर स्लाइड करना आवश्यक नहीं है। तो, बूटस्ट्रैप कोरोसेल आवश्यक नहीं है।

मैं जिस स्लाइडर को देख रहा हूं वह यह है, जिसे मैं अपनी आवश्यकता के अनुसार संशोधित करूंगा .

इसलिए, मैंने इन दो अवधारणाओं को मिलाने की कोशिश की। इस फिडल में दिखाए गए दो तत्व एक दूसरे से जुड़े नहीं हैं। फिर मैंने कोड के साथ खिलवाड़ करने की कोशिश की, लेकिन ऐसा लगता है कि कोरोसेल अभी भी स्लाइडर से अप्रभावित है आंदोलनों।

यहाँ गड़बड़ के बाद कोड है:

<html>
<head>
    <link rel="stylesheet" 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" 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" 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>
     <br><br>
</div>
<div id="slider">
    <div id="custom-handle" class="ui-slider-handle"></div>
</div>
</html>

मुख्य भाग जो काम नहीं कर रहा है वह है:

<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>

मुझे जो त्रुटियां मिलती हैं वे हैं:

लेखन त्रुटि: क्रियाएँ [t.getLast (...)] अपरिभाषित है, इसकी संपत्ति "बाइंड" तक नहीं पहुंच सकती है

तथा

लेखन त्रुटि: $(...)। हिंडोला एक समारोह नहीं है

कोरोसेल ठीक काम कर रहा है, इसलिए मुझे समझ नहीं आ रहा है कि दूसरी त्रुटि क्यों आ रही है। इस बीच, मैं पहली त्रुटि भी नहीं समझता।

तो, मेरा सवाल यहाँ है, यह काम क्यों नहीं करता है?

दूसरा, क्या ऐसा करने का कोई बेहतर तरीका है?

तीसरा, क्या मैं इसके लिए बेहतर कोड लिख सकता हूँ?

किसी भी मदद की सराहना की!


UPD: अपडेट किया गया fiddle


UPD: दिए गए $("#corouselExampleIndicators").data('slide-to',slide_number) ; को $('.corousel').corousel(slider_number) ; में बदला गया "nofollow noreferrer">यहां। लेकिन यह अभी भी काम नहीं करता है, और स्लाइडर ने अब काम करना बंद कर दिया है। फिडल यहां देखें।

कोड में class के बजाय id का उपयोग करने का प्रयास किया, यानी $('#corouselExampleIndicators').corousel(1) ; का उपयोग किया। फिर भी कुछ काम नहीं आया।


UPD: यदि किसी की दिलचस्पी है, तो अंतिम संस्करण यहां पाया जा सकता है। . यह त्रुटिपूर्ण रूप से काम करता है।

0
Mooncrater 30 सितंबर 2018, 12:52

1 उत्तर

सबसे बढ़िया उत्तर

मैंने देखा है कि आप jQuery के कई संस्करणों को शामिल कर रहे हैं जो एक दूसरे के साथ विरोध करते हैं और पृष्ठ Uncaught TypeError: $(...).carousel is not a function में त्रुटि उत्पन्न करते हैं

तो इस लाइन को हटा दें

<script type="text/javascript" src="http://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 type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

अपडेट: प्रश्नों के अपडेट के कारण।

मुझे निम्नलिखित पंक्ति में आपके अंतिम अद्यतन किए गए फिडेल के अंदर एक और दो टाइपो बग मिले:

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

यह carousel corousel नहीं है और यह slide_number slider_number नहीं है। तो, यह होना चाहिए

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

नोट: स्क्रिप्ट में यह बग्गी लाइन दो बार शामिल है।

नई पहेली देखें: http://jsfiddle.net/qmeanog1/

1
Mouneer 30 सितंबर 2018, 21:51