Question

Хочу в каталог файлов чтобы кртинки не добавлять в описание они добавлялись в слайдер которий автоматом прокручивается
но сколько слайдеров перелопатил не смог установить на сайт  вот один из примеров слайдера которий я питался установить http://art-ucoz.ru/load/skripty_i_dopolnenija/pleery_slajdery/svg_slajder_izobrazhenij/30-1-0-750

Answer 1

Чтобы фото подгружались с материалов каталога файлов, фото нужно будет крепить к материалам с помощью доп поля Изображения.

Тот слайдер, что на примере, установить его можно, только стоит учитывать, что он не адаптивный и будет ломать отображение сайта на мобильных устройствах.

При установке слайдера нужно удалить скрипт:

<script src="js/jquery-2.1.4.js"></script>

Установить примерно таким кодом:

<div class="cd-slider-wrapper">

<ul class="cd-slider" data-step1="M1402,800h-2V0h1c0.6,0,1,0.4,1,1V800z" data-step2="M1400,800H379L771.2,0H1399c0.6,0,1,0.4,1,1V800z" data-step3="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z" data-step4="M-2,800h2V0h-1c-0.6,0-1,0.4-1,1V800z" data-step5="M0,800h1021L628.8,0L1,0C0.4,0,0,0.4,0,1L0,800z" data-step6="M0,800h1400V0L1,0C0.4,0,0,0.4,0,1L0,800z">

<li class="visible">

<div class="cd-svg-wrapper">

<svg viewBox="0 0 1400 800">

<title>$IMG1_TITLE$</title>

<defs>

<clipPath id="cd-image-1">

<path id="cd-changing-path-1" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z"/>

</clipPath>

</defs>

 

<image height='800px' width="1400px" clip-path="url(#cd-image-1)" xlink:href="<?if($IMG_URL1$)?>$IMG_URL1$<?endif?>"></image>

</svg>

</div> <!-- .cd-svg-wrapper -->

</li>

 

<li>

<div class="cd-svg-wrapper">

<svg viewBox="0 0 1400 800">

<title>$IMG2_TITLE$</title>

<defs>

<clipPath id="cd-image-2">

<path id="cd-changing-path-2" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z"/>

</clipPath>

</defs>

 

<image height='800px' width="1400px" clip-path="url(#cd-image-2)" xlink:href="<?if($IMG_URL2$)?>$IMG_URL2$<?endif?>"></image>

</svg>

</div> <!-- .cd-svg-wrapper -->

</li>

 

<li>

<div class="cd-svg-wrapper">

<svg viewBox="0 0 1400 800">

<title>$IMG3_TITLE$</title>

<defs>

<clipPath id="cd-image-3">

<path id="cd-changing-path-3" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z"/>

</clipPath>

</defs>

 

<image height='800px' width="1400px" clip-path="url(#cd-image-3)" xlink:href="<?if($IMG_URL3$)?>$IMG_URL3$<?endif?>"></image>

</svg>

</div> <!-- .cd-svg-wrapper -->

</li>

 

<li>

<div class="cd-svg-wrapper">

<svg viewBox="0 0 1400 800">

<title>$IMG4_TITLE$</title>

<defs>

<clipPath id="cd-image-4">

<path id="cd-changing-path-4" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z"/>

</clipPath>

</defs>

 

<image height='800px' width="1400px" clip-path="url(#cd-image-4)" xlink:href="<?if($IMG_URL4$)?>$IMG_URL4$<?endif?>"></image>

</svg>

</div> <!-- .cd-svg-wrapper -->

</li>

 

</ul> <!-- .cd-slider -->

 

<ul class="cd-slider-navigation">

<li><a href="#0" class="next-slide">Next</a></li>

<li><a href="#0" class="prev-slide">Prev</a></li>

</ul> <!-- .cd-slider-navigation -->

 

<ol class="cd-slider-controls">

<li class="selected"><a href="#0"><em>Item 1</em></a></li>

<li><a href="#0"><em>Item 2</em></a></li>

<li><a href="#0"><em>Item 3</em></a></li>

<li><a href="#0"><em>Item 4</em></a></li>

</ol> <!-- .cd-slider-controls -->

</div> <!-- .cd-slider-wrapper -->

 

<script src="/js/jquery.mobile.custom.min.js"></script>

<script src="/js/snap.svg-min.js"></script>

<script src="/js/main.js"></script> 

<!-- Resource jQuery -->

<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->

<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->

<script src="js/modernizr.js"></script> <!-- Modernizr -->

не забудьте скрипты и стили загрузить и установить.

Comments

Я в ваш код не вносил изменений

---

Коля Карнаух #3,

Исправили работу слайдера, проверяйте, все работает.

---

Да все работает спасибо громное у меня два последних вопроса можно ли к нему автропрокрутку прикрутить и сделать чтобы он сам разширался по количеству картинок ато сейчас нужно добавлять только 4 картинки может както через тег $IMG_URL1..50$. Добавлять дополнительний блокдля картинок не вариант

---

Коля Карнаух #3,

Нужно вручную добавлять картинки кодом вида:

<li>

<div class="cd-svg-wrapper">

<svg viewBox="0 0 1400 800">

<title>$IMGN_TITLE$</title>

<defs>

<clipPath id="cd-image-4">

<path id="cd-changing-path-4" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z"/>

</clipPath>

</defs>

 

<image height='800px' width="1400px" clip-path="url(#cd-image-4)" xlink:href="<?if($IMG_URLN$)?>$IMG_URLN$<?endif?>"></image>

</svg>

</div> <!-- .cd-svg-wrapper -->

</li>

где вместо N номер картинки. Автопрокрутку сложно прикрутить так как слайдер сторонний, поищите решение в сети для слайдера. 

---

Yuri_Geruk,

Понял спасибо огромное