Problemi con l'avvio del cursore di orbita più volte

Question

Sto provando ad avviare lo scorrimento dell'orbita più volte, seguendo l'esempio this. ma non riesco a farlo funzionare.

Questo è il mio file all.js

$(document).ready(function() { 

//add input field for external media 
var max_fields  = 10; //maximum input boxes allowed 
var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
var add_button  = $(".add_field_button"); //Add button ID 

var x = 1; //initial text box count 
$(add_button).click(function(e){ //on add input button click 
    e.preventDefault(); 
    if(x < max_fields){ //max input box allowed 
     x++; //text box increment 
     $(wrapper).append('<div><input type="text" name="external_media[]"/><a href="#" class="remove_field"><button type="button" class="secondary button">Remove</button></a></div>'); //add input box 
    } 
}); 

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
    e.preventDefault(); $(this).parent('div').remove(); x--; 
}) 

//autocomplete for challenge question 
$("#challenge_question").autocomplete({ 
    source: "http://coop.app/admin/challenges/autocomplete", 
    minLength: 2, 
    select: function(event, ui) { 
     $('#challenge_question').val(ui.item.id); 
    } 
}); 

//slider 
//var orbit = new Foundation.Orbit($('#slider')); 
var sliderOptions = {}; 
var sliderInstances = []; 

$(".slider").each(function(element) { 
    sliderInstances.push(new Foundation.Orbit($(element), sliderOptions)); 
}); 

//chart views by category 
$('#byCategory').highcharts({ 
    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: 'Most read article type' 
    }, 
    xAxis: { 
     categories: icoop.categories 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: null 
     }, 
     allowDecimals: false 
    }, 
    legend: { 
     reversed: true 
    }, 
    plotOptions: { 
     series: { 
      stacking: null 
     }, 
    }, 
    series: [{ name: 'Views', data: icoop.categoryViews }] 
}); 

//chart views by chains 
$('#byChain').highcharts({ 
    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: 'Most read chain' 
    }, 
    xAxis: { 
     categories: icoop.chains 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: null 
     }, 
     allowDecimals: false 
    }, 
    legend: { 
     reversed: true 
    }, 
    plotOptions: { 
     series: { 
      stacking: null 
     }, 
    }, 
    series: [{ name: 'Views', data: icoop.chainViews }] 
    }); 

    //by time of the day 
    $('#byTime').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Time of the day with most reads' 
    }, 
    xAxis: { 
     categories: ['0-2', '2-4', '4-6', '6-8', '8-10', '10-12', '12-14', '14-16', '16-18', '18-20', '20-22', '22-24'] 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: null 
     }, 
     allowDecimals: false 
    }, 
    plotOptions: { 
     column: { 
      stacking: null 
     } 
    }, 
    series: [{ name: 'Views', data: icoop.viewsByTimeOFTheDay }] 
    }); 
}); 

E quando ce l'ho così, salgo in console

Uncaught TypeError: Object.defineProperty called on non-object  jquery.js:3718 

Quando sposto il codice per il cursore a fondo il file, non ho errori nella console, ma anche lo slider non funziona.

Questa è la mia opinione:

<div class="orbit slider" role="region" data-orbit> 
    <ul class="orbit-container"> 
     <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button> 
     <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button> 
     @foreach($article->medias as $media) 
     <li class="orbit-slide"> 
      {!! Html::image($media->path) !!} 
     </li> 
     @endforeach 
     @foreach($article->externalMedias as $externalMedia) 
      <li class="orbit-slide"> 
      <div class="flex-video"> 
       <iframe src="{{ $externalMedia->url }}"></iframe> 
      </div> 
      </li> 
     @endforeach 
    </ul> 
    </div> 

Inoltre, dal momento che stavo usando per la prima elisir volta in laravel, non sono sicuro se ho fatto correttamente le cose lì, quindi ci potrebbe essere anche un problema di file in conflitto. Questo è il mio gulpfile.js:

elixir(function(mix) { 
mix.sass('app.scss', './public/css/app.css') 

.styles([ 
    'foundation.min.css', 
    'app.css' 
]) 

.styles([ 
    'jquery.filer.css', 
    'jquery.filer-dragdropbox-theme.css', 
], "public/css/jquery-filer/jquery.filer.css") 

.scripts([ 
    'zurb/jquery.js', 
    'zurb/what-input.js', 
    'zurb/foundation.js', 
], "public/js/zurb/zurb.js") 

.scripts([ 
    'jquery-filer/jquery.filer.js', 
    'jquery-filer/image-uploader.js', 
], "public/js/jquery-filer/jquery-filer.js") 

.scripts([ 
    'editor/editor.js', 
], "public/js/editor/editor.js") 

.scripts([ 
    'app.js', 
], "public/js") 
}); 

ho avuto quel problema quando stavo implementando jQuery completamento automatico, che non avrebbe funzionato fino a quando mi sono mosso zurb.js script precedente jquery-ui.min.js. Ora io chiamo i miei script come questo:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script> 
    <script type="text/javascript" src="{{ asset('js/zurb/zurb.js') }}"></script> 
    <script type="text/javascript" src="{{ asset('js/jquery-ui/jquery-ui.min.js') }}"></script> 
    <script src="//cdn.tinymce.com/4/tinymce.min.js"></script> 
    <script type="text/javascript" src="{{ asset('js/jquery-filer/jquery-filer.js') }}"></script> 
    <script type="text/javascript" src="{{ asset('js/editor/editor.js') }}"></script> 
    <script src="https://code.highcharts.com/highcharts.js"></script> 
    <script src="https://code.highcharts.com/modules/exporting.js"></script> 
    <script src="{{ asset('js/all.js') }}"></script> 

Answer 1

Im in grado di testare il tuo codice, ma ho notato una piccola discrepanza che potrebbe si essere la causa qualche problema.

$(".slider").each(function(element) { 
    sliderInstances.push(new Foundation.Orbit($(element), sliderOptions)); 
}); 

Ad ogni istruzione manca un argomento. Il primo argomento restituisce l'indice e il secondo restituisce l'elemento. L'elemento restituisce il conteggio dell'indice del ciclo e non l'elemento che si spera. Dovrebbe essere ...

$(".slider").each(function(index, element) { 
    sliderInstances.push(new Foundation.Orbit($(element), sliderOptions)); 
}); 

Questa potrebbe essere una delle ragioni per cui si riscontrano problemi durante l'avvio del cursore oribit.

Answer 2

Il parametro "elemento" restituito da $ .each non deve necessariamente rientrare in $(), provare in questo modo e vediamo cosa succede.

$(".slider").each(function(element) { 
    sliderInstances.push(new Foundation.Orbit(element, sliderOptions)); 
}); 

Answer 3

Prima di tutto assicurarsi che non ci sia conflitto a causa della varietà degli script. Credo che cambiando il codice per:

$(".slider").each(function($element) { 
    sliderInstances.push(new Foundation.Orbit($element, sliderOptions)); 
}); 

o

$(".slider").each(function() { 
    sliderInstances.push(new Foundation.Orbit($(this), sliderOptions)); 
}); 

aiuterà.