Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.69/13: Рейтинг темы: голосов - 13, средняя оценка - 4.69
0 / 0 / 0
Регистрация: 18.05.2019
Сообщений: 84
1

Настройка слайдера

18.01.2020, 21:52. Показов 2380. Ответов 3

Все привет,
У меня имеется код к слайдера но сам слайдер можно сказать нерабоате.
1) Он почему то выводит аместо 3 картинок 5
2) Пропала пагинация
Настройка слайдера

Помогите испрваить пожалуйста, a то уже 3ий день с ним вожусь и не как.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <!-- Slider main container -->
            <div class="swiper-container swiper-slider-image">
              <!-- Additional required wrapper -->
              <div class="swiper-wrapper swiper-no-swiping">
               
                <!-- Slides -->
                <div class="swiper-slide"><img src="img/factory_img.jpg" alt="asda">
                </div>
                <div class="swiper-slide"><img src="img/factory_img.jpg" alt="asdas">
                </div>
                <div class="swiper-slide"><img src="img/factory_img.jpg" alt="asdsa">
                </div>
              </div>
            </div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var mySwiper = new Swiper('.swiper-container', {
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
 
    let next = $('.swiper-button-next');
    let prev = $('.swiper-button-prev');
    let bullets = $('.swiper-pagination');
 
    next.css('left', prev.width() + 29 + bullets.width() + 29);
    bullets.css('left', prev.width() + 29);
p.s. все скрипты подчключены.
p.s.s. или же кто то киньте другой работающий слайдер(код)
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
18.01.2020, 21:52
Ответы с готовыми решениями:

Вёрстка слайдера | Автоматическая прокрутка слайдера
Здравствуйте! ;) Вот на стадии разработки сайта случилась такая проблема которую не могу решить уже...

Позиционирование слайдера
Добрый день! Установил на сайт (на ucoz) слайдер. Выводится сбоку страницы. Нужно, чтобы выводился...

верстка слайдера
сайт - wsfox.ru секция &quot;Портфолио&quot;, у слайдера самая правая картинка обрезается.не могу понять...

Создание слайдера
Нужна ваша помощь. Извините если не туда пишу. Вообщем. Дело со слайдами. Работает вперед и...

3
468 / 333 / 144
Регистрация: 16.02.2018
Сообщений: 930
18.01.2020, 22:22 2
Цитата Сообщение от jhiugh1i1 Посмотреть сообщение
1) Он почему то выводит аместо 3 картинок 5
из-за значения
Цитата Сообщение от jhiugh1i1 Посмотреть сообщение
loop: true,
Цитата Сообщение от jhiugh1i1 Посмотреть сообщение
2) Пропала пагинация
Вы что подключить CSS от слайдера забыли?
1
0 / 0 / 0
Регистрация: 18.05.2019
Сообщений: 84
18.01.2020, 22:31  [ТС] 3
Ура теперь 3 картинки вместо 5 уже лучше.
А нет вроде сделал
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> -->
  <title>Балашиха Хлеб</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap&subset=cyrillic" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap&subset=cyrillic" rel="stylesheet">
 
  <link rel="stylesheet" href="css/swiper.min.css">
 
  <link rel="stylesheet" href="css/animate.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://api-maps.yandex.ru/2.1/?apikey=d3c22139-1ee1-4cf5-966e-69da051f7c60
  &lang=ru_RU" type="text/javascript"></script>
</head>
Добавлено через 2 минуты
Если как то поможет то вот на хосте https://vovafish.github.io/vovafish/
0
468 / 333 / 144
Регистрация: 16.02.2018
Сообщений: 930
19.01.2020, 01:57 4
Цитата Сообщение от jhiugh1i1 Посмотреть сообщение
Если как то поможет то вот на хосте https://vovafish.github.io/vovafish/
jhiugh1i1, у вас вся консоль красная. Стили не работают, скрипты тоже.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
19.01.2020, 01:57

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Реализация слайдера
Подскажите как можно реализовать данный слайдер? Сначала думал использовать слайдер tiny...

Верстка слайдера
Здравствуйте. Подскажите, пожалуйста, как сверстать такой слайдер более простым способом.

Замена слайдера
Привет, есть сайт batiat.ru, на создан Bitrix. У него есть 1 дизайн и слайдер вот этот: ...

Отладка слайдера
Помогите пожалуйста разобраться с работой слайдера, в конце концов заставить его работать, у меня...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.