Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
Konstan
2 / 2 / 4
Регистрация: 03.11.2015
Сообщений: 174
1

траблы с slick слайдером

14.10.2017, 14:48. Просмотров 1169. Ответов 3
Метки нет (Все метки)

Ребят , не появляются стрелки для перелистывания слайдера , что не так ?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="row">
                <div class="col-lg-12">
                    <div class="main-slider">
                        <div class="main-slider-item"><div class="main-slider-box"><img class="center-block" src="img/about_us_slaide_1.png" alt=""></div></div>
                        <div class="main-slider-item"><div class="main-slider-box"><img class="center-block" src="img/about_us_slaide_2.png" alt=""></div></div>
                        <div class="main-slider-item"><div class="main-slider-box"><img class="center-block" src="img/about_us_slaide_3.png" alt=""></div></div>
                        <div class="main-slider-item"><div class="main-slider-box"><img class="center-block" src="img/about_us_slaide_4.png" alt=""></div></div>
 
                        <div class="main-slider-item"><div class="main-slider-box"><img class="center-block" src="img/about_us_slaide_1.png" alt=""></div></div>
                        <div class="main-slider-item"><div class="main-slider-box"><img class="center-block" src="img/about_us_slaide_2.png" alt=""></div></div>
                        <div class="main-slider-item"><div class="main-slider-box"><img class="center-block" src="img/about_us_slaide_3.png" alt=""></div></div>
                        <div class="main-slider-item"><div class="main-slider-box"><img class="center-block" src="img/about_us_slaide_4.png" alt=""></div></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="slick/slick.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
 
    <script>
        $(document).ready(function(){
          $('.main-slider').slick({
            infinite: true,
            slidesToShow: 4,
            slidesToScroll: 4,
            arrows: true,
            prevArrow: '<i class="fa main-slider-arrows arrows-left fa-chevron-left"></i>',
            nextArrow: '<i class="fa main-slider-arrows arrows-right fa-chevron-right"></i>'
          });
        });
    </script>
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.10.2017, 14:48
Ответы с готовыми решениями:

Непонимание со слайдером
Добрый вечерок. Делаю сайт - презентацию приложения. Так вот нужно сделать слайдер внутри...

сложности с слайдером
вообщем такая проблема, на сайт заказчик попросил слайдер отзывов.я все сделал, слайдер пашет,но...

Глюк со слайдером от bootstrap
Здравствуйте уважаемые форумчане! Такой вопрос, в верстке использую слайдер от bootstrap, слайдер...

Подскажите с css слайдером в Опера
Всем добрый день. Есть css слайдер, работает везде Chrome, EI, Safari, Опера на последних...

Выпадающее меню перекрывается слайдером контента
День добрый, начал разбирать bootsrap 3 и наткнулся на проблему... Вообщем есть выпадающее меню, а...

3
dzendev
163 / 88 / 45
Регистрация: 12.03.2016
Сообщений: 235
14.10.2017, 17:35 2
Стрелки добавляются в разметку. Скорее всего проблема в том что не заданы стили для этих стрелок.
Javascript
1
2
prevArrow: '<i class="fa main-slider-arrows arrows-left fa-chevron-left"></i>',
nextArrow: '<i class="fa main-slider-arrows arrows-right fa-chevron-right"></i>'
 Комментарий модератора 
Используйте соответствующие теги в редакторе для форматирования кода!
0
Konstan
2 / 2 / 4
Регистрация: 03.11.2015
Сообщений: 174
14.10.2017, 19:48  [ТС] 3
Цитата Сообщение от dzendev Посмотреть сообщение
Используйте соответствующие теги в редакторе для форматирования кода!
а какие эти "соответствующие теги" ? Я документацию 2-3 раза перечитывал и так и не понял
(документация http://kenwheeler.github.io/slick/)
0
dzendev
163 / 88 / 45
Регистрация: 12.03.2016
Сообщений: 235
14.10.2017, 21:20 4
Лучший ответ Сообщение было отмечено Konstan как решение

Решение

Что можно тут сказать... Внимательней читайте
Цитата Сообщение от dzendev Посмотреть сообщение
Используйте соответствующие теги в редакторе для форматирования кода!
Это сообщение не от меня, а от модератора мне замечание.

А что касаемо кода, то всё работает.
https://codepen.io/anon/pen/mBzdVv
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="container">
<div class="row">
                <div class="col-lg-12">
                    <div class="main-slider">
                        <div class="main-slider-item"><div class="main-slider-box"><img class="center-block" src="img/about_us_slaide_1.png" alt=""></div></div>
                        <div class="main-slider-item"><div class="main-slider-box"><img class="center-block" src="img/about_us_slaide_2.png" alt=""></div></div>
                        <div class="main-slider-item"><div class="main-slider-box"><img class="center-block" src="img/about_us_slaide_3.png" alt=""></div></div>
                        <div class="main-slider-item"><div class="main-slider-box"><img class="center-block" src="img/about_us_slaide_4.png" alt=""></div></div>
 
                        <div class="main-slider-item"><div class="main-slider-box"><img class="center-block" src="img/about_us_slaide_1.png" alt=""></div></div>
                        <div class="main-slider-item"><div class="main-slider-box"><img class="center-block" src="img/about_us_slaide_2.png" alt=""></div></div>
                        <div class="main-slider-item"><div class="main-slider-box"><img class="center-block" src="img/about_us_slaide_3.png" alt=""></div></div>
                        <div class="main-slider-item"><div class="main-slider-box"><img class="center-block" src="img/about_us_slaide_4.png" alt=""></div></div>
                    </div>
                </div>
            </div>
        </div>
CSS
1
2
3
4
5
6
7
8
img{
  background: red;
  width: 200px;
  height: 100px;
}
.fa{
  font-size: 16px;
}
Add style:
https://cdnjs.cloudflare.com/ajax/li...tstrap.min.css
https://cdnjs.cloudflare.com/ajax/li.../slick.min.css
https://cdnjs.cloudflare.com/ajax/li...wesome.min.css
https://cdnjs.cloudflare.com/ajax/li...-theme.min.css
Javascript
1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
  $('.main-slider').slick({
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 4,
    arrows: true,
    prevArrow: '<i class="fa main-slider-arrows arrows-left fa-chevron-left"></i>',
    nextArrow: '<i class="fa main-slider-arrows arrows-right fa-chevron-right"></i>'
  });
});
Add js:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/li...1/slick.min.js
1
14.10.2017, 21:20
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.10.2017, 21:20

Выпадающий список не видно под слайдером
друзья такая проблема...есть меню в виде выпадающего списка...под меню находится слайдер...так вот...

Прозрачность кнопочек навигации под слайдером
Подскажите пожалуйста как это реализовать вот на этой вот страничке http://slav-raduga.com.ua/...

Блоку под слайдером задать высоту и позиционирование
Всем привет) начал делать свой сайт компьютерной помощи, столкнулся с кучей проблем,т.к. делаю...


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

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

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