Исправить отображение слайдера-карусели

@auraifua · Регистрация: 08.11.2017

Студворк — интернет-сервис помощи студентам

Здравствуйте, я в JQuery я полный ноль :-)
Возможно мои вопросы будут и тупые но все же, хочу сделать все по красоте.

Нашел в интернете крутую штуку под названием itemslider (https://tympanus.net/codrops/2... em-slider/) и захотел его установить на свой сайт под меню, но что то получается не все так красиво как на локалхосте, где то допускаю я ошибку и прошу что бы Вы помогли понять где именно.

Мои действие по установке были таковы:

1. Скачал zip архив с каруселью.
2. Распаковал и залил содержимое папки на хост, css и js отдельными файлами, в главный css ничего не вставлял.
3. Открыл файл index.html и забрал с него код

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
        <script src="templates/aura/js/modernizr.custom.63321.js"></script>
    </head>
    <body>
        <div class="container"> 
            <!-- Codrops top bar -->
            <div class="codrops-top clearfix">
                <a href="http://tympanus.net/Development/SliderPagination/"><strong>&laquo; Previous Demo: </strong>Slider Pagination Concept</a>
                <span class="right"><a href="http://tympanus.net/codrops/?p=13218"><strong>Back to the Codrops Article</strong></a></span>
            </div><!--/ Codrops top bar -->
            <header class="clearfix">
                <h1>Simple Multi-Item Slider <span>Category slider with CSS animations</span></h1>
            </header>
            <div class="main">
                <div id="mi-slider" class="mi-slider">
                    <ul>
                        <li><a href="#"><img src="https://www.cyberforum.ru/images/1.jpg" alt="img01"><h4>Boots</h4></a></li>
                        <li><a href="#"><img src="https://www.cyberforum.ru/images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
                        <li><a href="#"><img src="https://www.cyberforum.ru/images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
                        <li><a href="#"><img src="https://www.cyberforum.ru/images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
                    </ul>
                    <ul>
                        <li><a href="#"><img src="https://www.cyberforum.ru/images/5.jpg" alt="img05"><h4>Belts</h4></a></li>
                        <li><a href="#"><img src="https://www.cyberforum.ru/images/6.jpg" alt="img06"><h4>Hats &amp; Caps</h4></a></li>
                        <li><a href="#"><img src="https://www.cyberforum.ru/images/7.jpg" alt="img07"><h4>Sunglasses</h4></a></li>
                        <li><a href="#"><img src="https://www.cyberforum.ru/images/8.jpg" alt="img08"><h4>Scarves</h4></a></li>
                    </ul>
                    <ul>
                        <li><a href="#"><img src="https://www.cyberforum.ru/images/9.jpg" alt="img09"><h4>Casual</h4></a></li>
                        <li><a href="#"><img src="https://www.cyberforum.ru/images/10.jpg" alt="img10"><h4>Luxury</h4></a></li>
                        <li><a href="#"><img src="https://www.cyberforum.ru/images/11.jpg" alt="img11"><h4>Sport</h4></a></li>
                    </ul>
                    <ul>
                        <li><a href="#"><img src="https://www.cyberforum.ru/images/12.jpg" alt="img12"><h4>Carry-Ons</h4></a></li>
                        <li><a href="#"><img src="https://www.cyberforum.ru/images/13.jpg" alt="img13"><h4>Duffel Bags</h4></a></li>
                        <li><a href="#"><img src="https://www.cyberforum.ru/images/14.jpg" alt="img14"><h4>Laptop Bags</h4></a></li>
                        <li><a href="#"><img src="https://www.cyberforum.ru/images/15.jpg" alt="img15"><h4>Briefcases</h4></a></li>
                    </ul>
                    <nav>
                        <a href="#">Shoes</a>
                        <a href="#">Accessories</a>
                        <a href="#">Watches</a>
                        <a href="#">Bags</a>
                    </nav>
                </div>
            </div>
        </div><!-- /container -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="templates/aura/js/jquery.catslider.js"></script>
        <script>
            $(function() {
 
                $( '#mi-slider' ).catslider();
 
            });
        </script>

Вставил это все добро на сайт в шаблон main.tpl

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
                   <div class="frame-menu-main horizontal-menu">
                        {\Category\RenderMenu::create()->setConfig(array('cache'=>TRUE))->load('category_menu')}
                    </div>
                </header>
            </div>
            
            {literal}
            тут код что был выше 
            {/literal}
 
 
  
               <div class="content">
                {$content}

и получается какой то бред, прилагаю скрины

Осторожно. Большое разрешение картинок

Подскажите пожалуйста почему не работает коректно карусель?
Если вдруг все получится обещаю отблагодарить!

@2849141 · 08.11.2017, 23:41

Это в <head>..</head>

HTML5
1
2
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/modernizr.custom.63321.js"></script>

Это перед </body>

HTML5
1
2
3
4
5
6
7
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/jquery.catslider.js"></script>
<script>
    $(function() {
        $( '#mi-slider' ).catslider();
    });
</script>

Код слайдера

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
<div id="mi-slider" class="mi-slider">
    <ul>
        <li><a href="#"><img src="https://www.cyberforum.ru/images/1.jpg" alt="img01"><h4>Boots</h4></a></li>
        <li><a href="#"><img src="https://www.cyberforum.ru/images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
        <li><a href="#"><img src="https://www.cyberforum.ru/images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
        <li><a href="#"><img src="https://www.cyberforum.ru/images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
    </ul>
    <ul>
        <li><a href="#"><img src="https://www.cyberforum.ru/images/5.jpg" alt="img05"><h4>Belts</h4></a></li>
        <li><a href="#"><img src="https://www.cyberforum.ru/images/6.jpg" alt="img06"><h4>Hats &amp; Caps</h4></a></li>
        <li><a href="#"><img src="https://www.cyberforum.ru/images/7.jpg" alt="img07"><h4>Sunglasses</h4></a></li>
        <li><a href="#"><img src="https://www.cyberforum.ru/images/8.jpg" alt="img08"><h4>Scarves</h4></a></li>
    </ul>
    <ul>
        <li><a href="#"><img src="https://www.cyberforum.ru/images/9.jpg" alt="img09"><h4>Casual</h4></a></li>
        <li><a href="#"><img src="https://www.cyberforum.ru/images/10.jpg" alt="img10"><h4>Luxury</h4></a></li>
        <li><a href="#"><img src="https://www.cyberforum.ru/images/11.jpg" alt="img11"><h4>Sport</h4></a></li>
    </ul>
    <ul>
        <li><a href="#"><img src="https://www.cyberforum.ru/images/12.jpg" alt="img12"><h4>Carry-Ons</h4></a></li>
        <li><a href="#"><img src="https://www.cyberforum.ru/images/13.jpg" alt="img13"><h4>Duffel Bags</h4></a></li>
        <li><a href="#"><img src="https://www.cyberforum.ru/images/14.jpg" alt="img14"><h4>Laptop Bags</h4></a></li>
        <li><a href="#"><img src="https://www.cyberforum.ru/images/15.jpg" alt="img15"><h4>Briefcases</h4></a></li>
    </ul>
    <nav>
        <a href="#">Shoes</a>
        <a href="#">Accessories</a>
        <a href="#">Watches</a>
        <a href="#">Bags</a>
    </nav>
</div>

Пути файлов (.js, .css, .jpg) поправьте и готово.
Файл demo.css туда где и style.css

@auraifua · 09.11.2017, 20:35 **[ТС]**

Почему то все равно криво, и отображается не только на главной, а во всех разделах

Добавлено через 50 минут
Как с Вами можно связаться? быстрей бы сделали :-)

@2849141 · 10.11.2017, 23:28

auraifua, Вы используете DLE? Можете написать в wtsup попробую помочь +380 66 289 20 96

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@auraifua 0 / 0 / 0 Регистрация: 08.11.2017 Сообщений: 2
	09.11.2017, 20:35 [ТС]
	Почему то все равно криво, и отображается не только на главной, а во всех разделах Добавлено через 50 минут Как с Вами можно связаться? быстрей бы сделали :-) 0

@2849141 127 / 97 / 74 Регистрация: 06.10.2015 Сообщений: 260
	10.11.2017, 23:28
	auraifua, Вы используете DLE? Можете написать в wtsup попробую помочь +380 66 289 20 96 0