Блог

Я реализовал слайдер миниатюр, следуя примеру из ссылки https://splidejs.com/thumbnail-slider /. Результат отразился нормально, как я и ожидал, теперь я хочу удалить стрелки и индикатор выполнения, где и стрелка, и индикатор выполнения добавлены из CDN. как этого добиться.

ВЫВОД ИЗОБРАЖЕНИЯ

ЗАГОЛОВОЧНЫЕ ФАЙЛЫ

  <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>

      

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">

 <script type="text/javascript" src="catalog.js"></script>
 <link rel="stylesheet" type="text/css" href="catalog.css">
 

HTML-КОД

Основной слайдер

 div id="primary-slider" class="splide">
<div class="splide__track col-md-7">
<ul class="splide__list">
  <li class="splide__slide">
    <img src="pic3.jfif">
  </li>
  <li class="splide__slide">
    <img src="pic3.jfif">
  </li>
  <li class="splide__slide">
    <img src="pic1.jpg">
  </li>
   <li class="splide__slide">
    <img src="pic3.jfif">
  </li>
  <li class="splide__slide">
    <img src="pic3.jfif">
  </li>
  <li class="splide__slide">
    <img src="pic1.jpg">
  </li>
</ul>
 

Дополнительный слайдер

  <div id="secondary-slider" class="splide">
  <div class="splide__track col-md-7">
   <ul class="splide__list">
    <li class="splide__slide">
     <img src="pic3.jfif">
    </li>
    <li class="splide__slide">
     <img src="pic3.jfif">
   </li>
   <li class="splide__slide">
     <img src="pic1.jpg">
   </li>
   <li class="splide__slide">
     <img src="pic3.jfif">
   </li>
   <li class="splide__slide">
    <img src="pic3.jfif">
   </li>
   <li class="splide__slide">
     <img src="pic1.jpg">
   </li>
 </ul>
 

JS-КОД

 document.addEventListener( 'DOMContentLoaded', function () {
var secondarySlider = new Splide( '#secondary-slider', {
    fixedWidth  : 100,
    height      : 60,
    gap         : 10,
    cover       : true,
    isNavigation: true,
    focus       : 'center',
    breakpoints : {
        '600': {
            fixedWidth: 66,
            height    : 40,
        }
    },
} ).mount();



var primarySlider = new Splide( '#primary-slider', {
    type       : 'fade',
    heightRatio: 0.5,
    pagination : false,
    arrows     : false,
    cover      : true,
} ); // do not call mount() here.

primarySlider.sync( secondarySlider ).mount();
 

} );

Все, что вам нужно, это установить pagination и arrows false понравиться этому

 var primarySlider = new Splide( '#primary-slider', {
    type       : 'fade',
    heightRatio: 0.5,
    pagination : false,
    arrows     : false,
    cover      : true,
    pagination : false, // disable pagination
    arrows     : false // disbale arrows
} ); 
 

Повторите то же самое в secondary_slider

вы можете проверить все параметры здесь