Problems with initiating orbit slider multiple times

Question

I am trying to initiate orbit slider multiple times, by following this example. but I can't get it to work.

This is my all.js file

$(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 }]
  });
});

And when I have it like that, I get in the console

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

When I move the code for the slider to the bottom of the file, I don't get any errors in the console, but also slider doesn't work either.

This is my view:

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

Also, since I was using for the first time elixir in Laravel, I am not sure if I have done correctly things there, so there might be also a problem of files conflicting. This is my 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")
});

I had that problem when I was implementing jQuery autocomplete, which wouldn't work until I have moved script zurb.js above jquery-ui.min.js. Now I am calling my scripts like this:

  <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

First of all be sure that there's no conflict because of the variety of your scripts. I think changing the code to:

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

or

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

will help.