Как Сделать Слайдер Кликабельным?
#1
Отправлено 06 Июль 2015 - 18:34
#2
Отправлено 06 Июль 2015 - 19:06
ProninT (06 Июль 2015 - 18:34) писал:
Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
<!-- Jssor Slider Слайдер Начало --> {% IF index_page %} <div id="slideshow" class="wrap"> <div id="slider"> <!-- Slides Container --> <div u="slides" class="slides_container"> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" /> </div> </div> </div> </div> {% ENDIF %} <!-- Jssor Slider Слайдер Конец -->
Замените на:
<!-- Jssor Slider Слайдер Начало --> {% IF index_page %} <div id="slideshow" class="wrap"> <div id="slider"> <!-- Slides Container --> <div u="slides" class="slides_container"> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" /></a> </div> </div> </div> </div> {% ENDIF %} <!-- Jssor Slider Слайдер Конец -->
Вместо ссылка вставьте соответствующие ссылки, по которым будут открываться необходимые страницы в новой вкладке.
#3
Отправлено 06 Июль 2015 - 19:28
Firefly (06 Июль 2015 - 19:06) писал:
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
<!-- Jssor Slider Слайдер Начало --> {% IF index_page %} <div id="slideshow" class="wrap"> <div id="slider"> <!-- Slides Container --> <div u="slides" class="slides_container"> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" /> </div> </div> </div> </div> {% ENDIF %} <!-- Jssor Slider Слайдер Конец -->
Замените на:
<!-- Jssor Slider Слайдер Начало --> {% IF index_page %} <div id="slideshow" class="wrap"> <div id="slider"> <!-- Slides Container --> <div u="slides" class="slides_container"> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" /></a> </div> </div> </div> </div> {% ENDIF %} <!-- Jssor Slider Слайдер Конец -->
Вместо ссылка вставьте соответствующие ссылки, по которым будут открываться необходимые страницы в новой вкладке.
Спасибо!, но теперь появилась проблема - слайды невозможно перемотать, тк открывается ссылка
#4
Отправлено 06 Июль 2015 - 19:56
ProninT (06 Июль 2015 - 19:28) писал:
Здравствуйте, к сожалению единственный вариант избежать перехода при попытках перелистывания "свайпом", сменить способ перелистывания слайдов на управление кнопками(стрелками).
#10
Отправлено 20 Июль 2015 - 15:21
ProninT (20 Июль 2015 - 03:33) писал:
Здравствуйте.
Попробуйте сделать следующее:
В шаблоне main.css найдите, пожалуйста, данный код:
.jssora21r { background-position: -63px -33px; }
И замените его вот этим вот кодом:
.jssora21r { background-position: -60px 230px !important; margin-top: -255px; height: 550px !important; }
После этого в том же шаблоне найдите следующий код:
.jssora21l { background-position: -3px -33px; }
И замените его вот этим кодом:
.jssora21l { background-position: -5px 230px !important; margin-top: -255px; height: 550px !important; }
#11
Отправлено 20 Июль 2015 - 15:33
RayLi (20 Июль 2015 - 15:21) писал:
Попробуйте сделать следующее:
В шаблоне main.css найдите, пожалуйста, данный код:
.jssora21r { background-position: -63px -33px; }
И замените его вот этим вот кодом:
.jssora21r { background-position: -60px 230px !important; margin-top: -255px; height: 550px !important; }
После этого в том же шаблоне найдите следующий код:
.jssora21l { background-position: -3px -33px; }
И замените его вот этим кодом:
.jssora21l { background-position: -5px 230px !important; margin-top: -255px; height: 550px !important; }
Спасибо, получилось то, что хотел!!!!!
#12
Отправлено 04 Август 2015 - 12:22
#14
Отправлено 05 Август 2015 - 03:57
#15
Отправлено 05 Август 2015 - 04:14
<!-- Jssor Slider Слайдер Начало --> {% IF index_page %} <div id="slideshow" class="wrap"> <div id="slider"> <!-- Slides Container --> <div u="slides" class="slides_container"> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" /></a> </div> </div> </div> </div> {% ENDIF %} <!-- Jssor Slider Слайдер Конец -->
замените на:
<!-- Jssor Slider Слайдер Начало --> {% IF index_page %} <div id="slideshow" class="wrap"> <div id="slider"> <!-- Slides Container --> <div u="slides" class="slides_container"> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" /></a> </div> </div> <!-- Arrow Left --> <span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;"> </span> <!-- Arrow Right --> <span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px"> </span> </div> </div> {% ENDIF %} <!-- Jssor Slider Слайдер Конец -->
#16
Отправлено 05 Август 2015 - 04:29
Vaccina (05 Август 2015 - 04:14) писал:
<!-- Jssor Slider Слайдер Начало --> {% IF index_page %} <div id="slideshow" class="wrap"> <div id="slider"> <!-- Slides Container --> <div u="slides" class="slides_container"> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" /></a> </div> </div> </div> </div> {% ENDIF %} <!-- Jssor Slider Слайдер Конец -->
замените на:
<!-- Jssor Slider Слайдер Начало --> {% IF index_page %} <div id="slideshow" class="wrap"> <div id="slider"> <!-- Slides Container --> <div u="slides" class="slides_container"> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" /></a> </div> <div> <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" /></a> </div> </div> <!-- Arrow Left --> <span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;"> </span> <!-- Arrow Right --> <span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px"> </span> </div> </div> {% ENDIF %} <!-- Jssor Slider Слайдер Конец -->
Спасибо, получилось!
#18
Отправлено 05 Август 2015 - 11:39
#19
Отправлено 06 Август 2015 - 04:01
User (05 Август 2015 - 11:39) писал:
В main.css найдите:
/* Стрелки слайдера*/ .jssora21l { background-position: -5px 230px !important; margin-top: -255px; height: 550px !important; } .jssora21r { background-position: -60px 230px !important; margin-top: -255px; height: 550px !important; }
замените на:
.jssora21l, .jssora21r, .jssora21ldn, .jssora21rdn {position: absolute;cursor: pointer;display: block;background: url('{ASSETS_IMAGES_PATH}a21.png?design=azure') center center no-repeat;overflow: hidden;} .jssora21l { background-position: -3px -33px; } .jssora21r { background-position: -63px -33px; } .jssora21l:hover { background-position: -123px -33px; } .jssora21r:hover { background-position: -183px -33px; } .jssora21ldn { background-position: -243px -33px; } .jssora21rdn { background-position: -303px -33px; }
Гельд (05 Август 2015 - 09:11) писал:
В сообщении выше #15 указан готовый код с ссылками, со стрелками и без свайпа
#20
Отправлено 06 Август 2015 - 10:57
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных