Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
0 / 0 / 0
Регистрация: 05.11.2016
Сообщений: 64
1

Разъехался слайдер

03.11.2018, 00:03. Показов 666. Ответов 8
Метки css, html (Все метки)

Author24 — интернет-сервис помощи студентам
Помогите, не могу разобраться почему разъехался слайдер.

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<section>   
        <div class="SLIDER">
            <div class="slide">
                <a href="">
                    <img class="slideImg" src="Slider/1(x1).jpg" alt="Картинка слайда 1">
                </a>
               
                <div class="slideText">
                    <span class="slideName">BMW X1</span>
                    <span class="slidePrice">От 1 980 000 Р</span>
                </div>
            </div>
            <div class="slide">
                <a href="">
                    <img class="slideImg" src="Slider/2(3-series).jpg" alt="Картинка слайда 2">
                </a>
                
                <div class="slideText">
                    <span class="slideName">BMW 3 серии</span>
                    <span class="slidePrice">От 1 940 000 Р</span>
                </div>
            </div>
            <div class="slide">
                <a href="">
                    <img class="slideImg" src="Slider/3(5-series).jpg" alt="Картинка слайда 3">
                </a>
                
                <div class="slideText">
                    <span class="slideName">BMW 5 серии</span>
                    <span class="slidePrice">От 2 930 000 Р</span>
                </div>
            </div>
            <div class="slide">
                <a href="">
                    <img class="slideImg" src="Slider/4(x4).jpg" alt="Картинка слайда 4">
                </a>
                
                <div class="slideText">
                    <span class="slideName">BMW X4</span>
                    <span class="slidePrice">От 3 420 000 Р</span>
                </div>
            </div>
            <div class="slide">
                <a href="">
                    <img class="slideImg" src="Slider/5(m2).jpg" alt="Картинка слайда 5">
                </a>
                
                <div class="slideText">
                    <span class="slideName">BMW M2</span>
                    <span class="slidePrice">От 4 290 000 Р</span>
                </div>
            </div>
        </div>
        
        <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script type="text/javascript" src="Slider/slick/slick.min.js"></script>
        <script src="javascript/slider.js"></script>
    </section>
CSS
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
36
37
38
39
40
41
42
43
44
45
46
47
48
.SLIDER {
    border: 6px solid black;
    border-radius: 50px;
    width: 1470px;
    margin: 30px auto;
    box-sizing: border-box;
}
 
.slide {
    position: relative;
}
 
.slideImg {
    width: 1460px;
    height: 756px;
    border-radius: 45px;
}
 
.slideText {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 0 0 40px 40px;
    width: 100%;
    height: 90px;
    font-family: Verdana;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 100px;
}
 
.slideName {
    letter-spacing: 2px;
    margin-left: 50px;
    position: relative;
    top: 25px;
    font-size: 20px;
    font-weight: bold;
}
 
.slidePrice {
    float: right;
    letter-spacing: 2px;
    margin-right: 50px;
    position: relative;
    top: 25px;
    font-size: 20px;
    font-weight: bold;
}
Javascript
1
2
3
4
5
6
7
8
9
10
$('.SLIDER').slick({
    arrows: false,
    dots: true,
    infinite: true,
    speed: 500,
    fade: true,
    cssEase: 'linear',
    autoplay: true,
    autoplaySpeed: 10000
});
Миниатюры
Разъехался слайдер  
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
03.11.2018, 00:03
Ответы с готовыми решениями:

Разъехался слайдер
Привет всем! После внесения изменений в блок &quot;Путешествия&quot; на сайте разъехался слайдер и сместил...

Разъехался шаблон mixxmag
сайт совсем недолго работает и все было хорошо...но недавно на 4 страницах появился черный фон!...

Слайдер
Дело обстоит так. Мне нужно вставить на сайт слайдер как на этом сайте Жедательно исходник)

Слайдер
Сайт http://zvezda-s-neba.ru/ , если прокрутить слайдер, то вы можете увидеть 5 изображений не...

8
Эксперт HTML/CSS
2964 / 2599 / 1068
Регистрация: 15.12.2012
Сообщений: 9,876
Записей в блоге: 11
03.11.2018, 11:07 2
Dmitriy45, а где у Вас slick.css?
0
0 / 0 / 0
Регистрация: 05.11.2016
Сообщений: 64
03.11.2018, 13:31  [ТС] 3
slick.css и slick-theme.css они есть, забыл добавить
0
Эксперт HTML/CSS
2964 / 2599 / 1068
Регистрация: 15.12.2012
Сообщений: 9,876
Записей в блоге: 11
03.11.2018, 13:55 4
Цитата Сообщение от Dmitriy45 Посмотреть сообщение
slick.css и slick-theme.css они есть, забыл добавить
Тогда смотрите, что пишет консоль...
0
0 / 0 / 0
Регистрация: 05.11.2016
Сообщений: 64
03.11.2018, 16:42  [ТС] 5
а как открыть консоль?
0
204 / 67 / 41
Регистрация: 15.09.2018
Сообщений: 197
04.11.2018, 19:01 6
попробуйте

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
// 320
  $(function(){
  $('.SLIDER').slick({
    arrows: false,
    dots: true,
    infinite: true,
    speed: 500,
    fade: true,
    cssEase: 'linear',
    autoplay: true,
    autoplaySpeed: 2000
});
    });
0
0 / 0 / 0
Регистрация: 05.11.2016
Сообщений: 64
04.11.2018, 22:06  [ТС] 7
Ничего не изменилось, только ошибки появились
0
204 / 67 / 41
Регистрация: 15.09.2018
Сообщений: 197
05.11.2018, 17:11 8
В Firefox нормально Ваш код работает jsfiddle. Ничего не разъезжается.
0
Модератор
Эксперт JSЭксперт HTML/CSS
2687 / 1759 / 760
Регистрация: 13.03.2010
Сообщений: 5,844
06.11.2018, 12:29 9
Dmitriy45, в хроме F12 и нажать Console. Там могут быть ошибки. Например, ошибка подключения slick.js.
0
06.11.2018, 12:29
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
06.11.2018, 12:29
Помогаю со студенческими работами здесь

слайдер
Вечер добрый, хотел узнать знает ли кто подобные реализации слайдеров сайт стоит на цмс(допустим...

слайдер
Добрый вечер! Ребята подскажите, пожалуйста, начинающему программисту, как сделать слайдер как на...

Слайдер
Сайт http://fotomax72.ru Здравствуйте, подскажите как убрать серую полосу внизу модуля слайдера?

Слайдер
Форумчане, помогите пожалуйста найти слайдер который мне подойдет:...


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

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru