Изменить Еффект Переключения Слайдера
#1
Отправлено 03 Ноябрь 2013 - 13:11
#2
Отправлено 03 Ноябрь 2013 - 13:33
xomyd (03 Ноябрь 2013 - 13:11) писал:
Подобный вопрос рассматривался в теме - http://forum.storela...ivo/#entry38774
То есть можно поменять эффект слайдера
effect: 'sliceDown', //fold,fade,sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpDown sliceUpDownLeft random slideInRight slideInLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse
#3
Отправлено 03 Ноябрь 2013 - 15:10
miyako (03 Ноябрь 2013 - 13:33) писал:
То есть можно поменять эффект слайдера
effect: 'sliceDown', //fold,fade,sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpDown sliceUpDownLeft random slideInRight slideInLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse
#4
Отправлено 03 Ноябрь 2013 - 16:48
<!-- Запуск слайдера --> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider().parent().show(); }); </script> {% ENDIF %}и замените его на
<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect: fold', //fold,fade,sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpDown sliceUpDownLeft random slideInRight slideInLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse slices: 1, // For slice animations animSpeed: 1500, // Slide transition speed pauseTime: 6000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: false, // Вперед/Назад controlNavThumbs: true, // Использование картинок точек внизу для навигации pauseOnHover: true, // при наведении анимация останавливается }).parent().show(); }); </script>
#5
Отправлено 04 Ноябрь 2013 - 07:20
Stasya (03 Ноябрь 2013 - 16:48) писал:
<!-- Запуск слайдера --> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider().parent().show(); }); </script> {% ENDIF %}и замените его на
<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect: fold', //fold,fade,sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpDown sliceUpDownLeft random slideInRight slideInLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse slices: 1, // For slice animations animSpeed: 1500, // Slide transition speed pauseTime: 6000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: false, // Вперед/Назад controlNavThumbs: true, // Использование картинок точек внизу для навигации pauseOnHover: true, // при наведении анимация останавливается }).parent().show(); }); </script>
#6
Отправлено 04 Ноябрь 2013 - 08:26
xomyd (04 Ноябрь 2013 - 07:20) писал:
Код в шаблоне HTML -
<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect: fold', //fold,fade,sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpDown sliceUpDownLeft random slideInRight slideInLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse slices: 1, // For slice animations animSpeed: 1500, // Slide transition speed pauseTime: 6000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: false, // Вперед/Назад controlNavThumbs: true, // Использование картинок точек внизу для навигации pauseOnHover: true, // при наведении анимация останавливается }).parent().show(); }); </script>замените на -
<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect: 'fold', //fold,fade,sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpDown sliceUpDownLeft random slideInRight slideInLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse slices: 1, // For slice animations animSpeed: 1500, // Slide transition speed pauseTime: 6000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: false, // Вперед/Назад controlNavThumbs: true, // Использование картинок точек внизу для навигации pauseOnHover: true, // при наведении анимация останавливается }).parent().show(); }); </script>
#7
Отправлено 13 Февраль 2014 - 17:20
miyako (04 Ноябрь 2013 - 08:26) писал:
<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect: fold', //fold,fade,sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpDown sliceUpDownLeft random slideInRight slideInLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse slices: 1, // For slice animations animSpeed: 1500, // Slide transition speed pauseTime: 6000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: false, // Вперед/Назад controlNavThumbs: true, // Использование картинок точек внизу для навигации pauseOnHover: true, // при наведении анимация останавливается }).parent().show(); }); </script>замените на -
<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect: 'fold', //fold,fade,sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpDown sliceUpDownLeft random slideInRight slideInLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse slices: 1, // For slice animations animSpeed: 1500, // Slide transition speed pauseTime: 6000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: false, // Вперед/Назад controlNavThumbs: true, // Использование картинок точек внизу для навигации pauseOnHover: true, // при наведении анимация останавливается }).parent().show(); }); </script>
Подскажите, пожалуйста:
1) Первым делом - какого разрешения картинки закидывать? (чтобы при переключении слайдер не гулял вверх-вниз; чтобы фото не были меньше, чем нужно и больше, чем нужно). А то они размываются ((
2) Уменьшить отступ между слайдером и страницей.
3) Чтобы слайдер грузился вперед "Pluso" и "Онлайн-консультанта".
Вот рисунок с пометками:
4) После того, как поменял эффект на "fade" - пропали нижние кнопки переключения слайдов, кнопки влево-вправо,
NEW 5) Как убрать загрузку слайдера в мобильной версии?
NEW 6) Как поменять цвет фона у подписей к слайдам и цвет шрифта.
Сообщение отредактировал Andrew S.: 13 Февраль 2014 - 23:28
#8
Отправлено 14 Февраль 2014 - 03:47
2. В nyvo.css найдите:
.theme-default .nivoSlider { background: url("###nyvo_loading.gif") no-repeat scroll 50% 50% #FFFFFF; box-shadow: 0 0 0 0 #4A4A4A; margin-bottom: 50px; position: relative; } и .theme-default .nivo-controlNav { padding: 20px 0; text-align: center; }замените на:
.theme-default .nivoSlider { background: url("###nyvo_loading.gif") no-repeat scroll 50% 50% #FFFFFF; box-shadow: 0 0 0 0 #4A4A4A; margin-bottom: 0px; position: relative; } и .theme-default .nivo-controlNav { padding: 0; text-align: center; }3. Слайдер будет дольше грузиться, так как ему еще необходима подгрузка слайдов
4.У вас JS слайдера как сейчас выглядит?
5. В main.css добавьте:
@media only screen and (max-width:479px) { .theme-default .nivoSlider{display:none;} }6. nyvo.css:
.nivo-caption { -moz-box-sizing: border-box; background: none repeat scroll 0 0 #000000; bottom: 0; color: #FFFFFF; display: none; left: 0; opacity: 0.8; overflow: hidden; padding: 5px 10px; position: absolute; width: 100%; z-index: 8; }
#9
Отправлено 14 Февраль 2014 - 15:52
Vaccina (14 Февраль 2014 - 03:47) писал:
2. В nyvo.css найдите:
.theme-default .nivoSlider { background: url("http://###/nyvo_loading.gif") no-repeat scroll 50% 50% #FFFFFF; box-shadow: 0 0 0 0 #4A4A4A; margin-bottom: 50px; position: relative; } и .theme-default .nivo-controlNav { padding: 20px 0; text-align: center; }замените на:
.theme-default .nivoSlider { background: url("http://###/nyvo_loading.gif") no-repeat scroll 50% 50% #FFFFFF; box-shadow: 0 0 0 0 #4A4A4A; margin-bottom: 0px; position: relative; } и .theme-default .nivo-controlNav { padding: 0; text-align: center; }3. Слайдер будет дольше грузиться, так как ему еще необходима подгрузка слайдов
4.У вас JS слайдера как сейчас выглядит?
5. В main.css добавьте:
@media only screen and (max-width:479px) { .theme-default .nivoSlider{display:none;} }6. nyvo.css:
.nivo-caption { -moz-box-sizing: border-box; background: none repeat scroll 0 0 #000000; bottom: 0; color: #FFFFFF; display: none; left: 0; opacity: 0.8; overflow: hidden; padding: 5px 10px; position: absolute; width: 100%; z-index: 8; }
JS Слайдера --jquery.nivo.slider.pack.js-- : не могу отправить код тут.. Пишет "ошибка, слишком много смайликов"
Slider JS.txt 12,1К 641 Количество загрузок:
В остальном все вроде нормально.
Кнопок так и нет (на всякий случай пишу).
Четвёртый вопрос остался...
Сообщение отредактировал Danil: 29 Сентябрь 2014 - 19:50
#10
Отправлено 15 Февраль 2014 - 04:53
#11
Отправлено 15 Февраль 2014 - 19:14
Vaccina (15 Февраль 2014 - 04:53) писал:
У меня как по инструкции, закачались только nyvo.css и jquery.nivo.slider.pack.js и кнопки. Всё.
Вот код nyvo.css (но это, вроде, стили) :
/* * jQuery Nivo Slider v3.0.1 * http://nivo.dev7studios.com * * Copyright 2012, Dev7studios * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ /* The Nivo Slider styles */ .nivoSlider { position:relative; width:100%; height:auto; overflow: hidden; } .nivoSlider img { position:absolute; top:0px; left:0px; } .nivo-main-image { display: block !important; position: relative !important; width: 100% !important; }[/size] [size=4]/* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:6; display:none; } /* The slices and boxes in the Slider */ .nivo-slice { display:block; position:absolute; z-index:5; height:100%; top:0; } .nivo-box { display:block; position:absolute; z-index:5; overflow:hidden; } .nivo-box img { display:block; }[/size] [size=4]/* Caption styles */ .nivo-caption { position:absolute; left:0px; bottom:0px; background:#FCFCFC; color:#000; width:100%; z-index:8; padding: 5px 10px; opacity: 0.8; overflow: hidden; display: none; -moz-opacity: 0.8; filter:alpha(opacity=8); -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav { text-align:center; padding: 15px 0; } .nivo-controlNav a { cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; }[/size] [size=4]/* Skin Name: Nivo Slider Default Theme Skin URI: ### Skin Type: flexible Description: The default skin for the Nivo Slider. Version: 1.2 Author: Gilbert Pellegrom Author URI: http://### */[/size] [size=4].theme-default .nivoSlider { background: url("http://###/nyvo_loading.gif") no-repeat scroll 50% 50% #FFFFFF; box-shadow: 0 0 0 0 #4A4A4A; margin-bottom: 0px; position: relative; } .theme-default .nivoSlider img { position:absolute; top:0px; left:0px; display:none; } .theme-default .nivoSlider a { border:0; display:block; }[/size] [size=4].theme-default .nivo-controlNav { padding: 0; text-align: center; } .theme-default .nivo-controlNav a { display:inline-block; width:22px; height:22px; background:url({ASSETS_IMAGES_PATH}nyvo_bullets.png) no-repeat; text-indent:-9999px; border:0; margin: 0 2px; } .theme-default .nivo-controlNav a.active { background-position:0 -22px; }[/size] [size=4].theme-default .nivo-directionNav a { display:block; width:30px; height:30px; background:url({ASSETS_IMAGES_PATH}nyvo_arrows.png) no-repeat; text-indent:-9999px; border:0; } .theme-default a.nivo-nextNav { background-position:-30px 0; right:15px; } .theme-default a.nivo-prevNav { left:15px; }[/size] [size=4].theme-default .nivo-caption { font-family: Helvetica, Arial, sans-serif; } .theme-default .nivo-caption a { color:#fff; border-bottom:1px dotted #fff; } .theme-default .nivo-caption a:hover { color:#fff; }[/size] [size=4].theme-default .nivo-controlNav.nivo-thumbs-enabled { width: 100%; } .theme-default .nivo-controlNav.nivo-thumbs-enabled a { width: auto; height: auto; background: none; margin-bottom: 5px; } .theme-default .nivo-controlNav.nivo-thumbs-enabled img { display: block; width: 120px; height: auto; }
Я только эффект на "fade" поменял и они пропали..
Сообщение отредактировал Danil: 29 Сентябрь 2014 - 19:52
#12
Отправлено 18 Февраль 2014 - 05:17
$(window).load(function() { $ ('# slider').nivoSlider (( effect: 'random', / / Задаётся как: 'fold, fade, sliceDown' controlNav: true, / / 1,2,3 ... controlNavThumbs: true, / / Использование картинок для Control Nav )); });
#13
Отправлено 19 Февраль 2014 - 06:20
Vaccina (18 Февраль 2014 - 05:17) писал:
$(window).load(function() { $ ('# slider').nivoSlider (( effect: 'random', / / Задаётся как: 'fold, fade, sliceDown' controlNav: true, / / 1,2,3 ... controlNavThumbs: true, / / Использование картинок для Control Nav )); });
И у меня три квадратика красных с крестиками отобразились у строчек этих новых.. И пишет про разные ошибки..
Щас увидел.. Из-за этого кода перестало работать меню и фото начали открываться в новом окне. Убрал код.
Сообщение отредактировал Andrew S.: 19 Февраль 2014 - 08:02
#14
Отправлено 20 Февраль 2014 - 02:39
<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect: 'fade', //fold, fade, sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpDown sliceUpDownLeft random slideInRight slideInLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse slices: 1, // For slice animations animSpeed: 1500, // Slide transition speed pauseTime: 6000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: false, // Вперед/Назад controlNavThumbs: true, // Использование картинок точек внизу для навигации pauseOnHover: true, // при наведении анимация останавливается }).parent().show(); }); </script>
В данном блоке кода задаются параметры слайдера (каждый параметр имеет пометку). Опция directionNav у вас отключена (false). Замените на (true) для включения.
#15
Отправлено 22 Февраль 2014 - 10:00
Сake (20 Февраль 2014 - 02:39) писал:
<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect: 'fade', //fold, fade, sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpDown sliceUpDownLeft random slideInRight slideInLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse slices: 1, // For slice animations animSpeed: 1500, // Slide transition speed pauseTime: 6000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: false, // Вперед/Назад controlNavThumbs: true, // Использование картинок точек внизу для навигации pauseOnHover: true, // при наведении анимация останавливается }).parent().show(); }); </script>
В данном блоке кода задаются параметры слайдера (каждый параметр имеет пометку). Опция directionNav у вас отключена (false). Замените на (true) для включения.
#16
Отправлено 25 Февраль 2014 - 03:12
<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect: 'fade', //fold, fade, sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpDown sliceUpDownLeft random slideInRight slideInLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse slices: 1, // For slice animations animSpeed: 1500, // Slide transition speed pauseTime: 6000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: true, // Вперед/Назад controlNav: true, // Использование картинок точек внизу для навигации controlNavThumbs: false, // Use thumbnails for Control Nav pauseOnHover: true, // при наведении анимация останавливается }).parent().show(); }); </script>
#17
Отправлено 03 Март 2014 - 02:58
Сake (25 Февраль 2014 - 03:12) писал:
<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect: 'fade', //fold, fade, sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpDown sliceUpDownLeft random slideInRight slideInLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse slices: 1, // For slice animations animSpeed: 1500, // Slide transition speed pauseTime: 6000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: true, // Вперед/Назад controlNav: true, // Использование картинок точек внизу для навигации controlNavThumbs: false, // Use thumbnails for Control Nav pauseOnHover: true, // при наведении анимация останавливается }).parent().show(); }); </script>
Сейчас:
Сделать:
Оно хорошо ровно стояло до появления нижних кнопок..
#18
Отправлено 03 Март 2014 - 07:53
Andrew S. (03 Март 2014 - 02:58) писал:
Сейчас:
Rasst.png
Сделать:
Rasst - копия.png
Оно хорошо ровно стояло до появления нижних кнопок..
Здравствуйте
Редактируем bootstrap-responsive.min.css
Находим
.row-fluid .span7 { width: 97%; margin: 1.5%; }
Заменяем на
.row-fluid .span7 { width: 97%; margin: 0 1.5% 1.5% 1.5%; }
Редактируем шаблон HTML
Находим
<div class="theme-default" style="padding: 1em;">
Заменяем на
<div class="theme-default" style="padding: 1em 1em 0 1em;">
#19
Отправлено 03 Март 2014 - 10:59
Castiel (03 Март 2014 - 07:53) писал:
Редактируем bootstrap-responsive.min.css
Находим
.row-fluid .span7 { width: 97%; margin: 1.5%; }
Заменяем на
.row-fluid .span7 { width: 97%; margin: 0 1.5% 1.5% 1.5%; }
Редактируем шаблон HTML
Находим
<div class="theme-default" style="padding: 1em;">
Заменяем на
<div class="theme-default" style="padding: 1em 1em 0 1em;">
#20
Отправлено 03 Март 2014 - 11:09
Castiel (03 Март 2014 - 07:53) писал:
Редактируем bootstrap-responsive.min.css
Находим
.row-fluid .span7 { width: 97%; margin: 1.5%; }
Заменяем на
.row-fluid .span7 { width: 97%; margin: 0 1.5% 1.5% 1.5%; }
Редактируем шаблон HTML
Находим
<div class="theme-default" style="padding: 1em;">
Заменяем на
<div class="theme-default" style="padding: 1em 1em 0 1em;">
1. В bootstrap-responsive.min.css:
.row-fluid .span7{width:57.18232044198895%;*width:57.12912895262725%}
и
.row-fluid .span7{width:97%;*width:97%; margin: 1.5%;}
2. В шаблоне HTML:
<!-- Обёртка, указывающая стиль темы --> <div class="theme-default" style="padding: 1em; display: none;">
При замене этого кода - все обваливается.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных