Перейти к содержимому


Поставить Слайдер На Отдельную Страницу.

Автор SOGOOD, 14 нояб. 2017 14:16
слайдер главная

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 8

#1 SOGOOD

SOGOOD

    Пользователь

  • Пользователи
  • PipPip
  • 48 сообщений

Отправлено 14 Ноябрь 2017 - 14:16

Добрый день, подскажите как мне поставить слайдер для картинок во весь размер страницы, между текстом. Это отдельно созданная мной страница!

Прикрепленные изображения

  • фывфыв.png

#2 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 14 Ноябрь 2017 - 14:29

Просмотр сообщенияsogoodfso (14 Ноябрь 2017 - 14:16) писал:

Добрый день, подскажите как мне поставить слайдер для картинок во весь размер страницы, между текстом. Это отдельно созданная мной страница!

Здравствуйте. Вам нужно при редактировании страницы нажать кнопку "Источник" и в нужное место вставить код:

<script>
<!-- Запуск слайдера -->
$(window).load(function() {
$(".flexslider").flexslider({
animation: "slide"
});
});
</script>
<!-- flexslider слайдер который отображается на главной -->
<div class="flexslider">
<ul class="slides">
<li>
<a href="#"><img src="ссылка на картинку1" alt="" /></a>
</li>
<li>
<a href="#"><img src="ссылка на картинку2" alt="" /></a>
</li>
<li>
<a href="#"><img src="ссылка на картинку3" alt="" /></a>
</li>
<li>
<a href="#"><img src="ссылка на картинку4" alt="" /></a>
</li>
</ul>
</div>

И подставьте там ссылки на картинки

#3 SOGOOD

SOGOOD

    Пользователь

  • Пользователи
  • PipPip
  • 48 сообщений

Отправлено 14 Ноябрь 2017 - 15:08

Просмотр сообщенияMikDark (14 Ноябрь 2017 - 14:29) писал:

Здравствуйте. Вам нужно при редактировании страницы нажать кнопку "Источник" и в нужное место вставить код:

<script>
<!-- Запуск слайдера -->
$(window).load(function() {
$(".flexslider").flexslider({
animation: "slide"
});
});
</script>
<!-- flexslider слайдер который отображается на главной -->
<div class="flexslider">
<ul class="slides">
<li>
<a href="#"><img src="ссылка на картинку1" alt="" /></a>
</li>
<li>
<a href="#"><img src="ссылка на картинку2" alt="" /></a>
</li>
<li>
<a href="#"><img src="ссылка на картинку3" alt="" /></a>
</li>
<li>
<a href="#"><img src="ссылка на картинку4" alt="" /></a>
</li>
</ul>
</div>

И подставьте там ссылки на картинки
Поставил, как мне теперь убрать эти 2 точки

Прикрепленные изображения

  • Безымя232нный.png
  • 111111Безымянный.png

#4 RayLi

RayLi

    Активный участник

  • Модераторы
  • 2 864 сообщений

Отправлено 14 Ноябрь 2017 - 15:28

Просмотр сообщенияsogoodfso (14 Ноябрь 2017 - 15:08) писал:

Поставил, как мне теперь убрать эти 2 точки

Здравствуйте.
В данном случае, попробуйте, пожалуйста, в шаблоне style.css найти следующий код:


/* Слайдер на главной странице jQuery FlexSlider */

/* Browser Resets */
.flex-container a:active,.flexslider a:active,.flex-container a:focus,.flexslider a:focus  {outline: none;}
.slides,.flex-control-nav,.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 
/* FlexSlider Necessary Styles */ 
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}
.no-js .slides > li:first-child {display: block;}
/* FlexSlider Default Theme */
.flexslider {margin: 0 0 30px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 5px}
/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url({ASSETS_IMAGES_PATH}bg_direction_nav.png?design=autumn) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
/* END Слайдер на главной странице jQuery FlexSlider */

/*Navbar*/

И заменить его вот этим вот кодом:


/* Слайдер на главной странице jQuery FlexSlider */


/* FlexSlider слайдер на главной */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 
.flexslider {margin: 0; padding: 0;}
.flexslider ul, .flexslider il li {list-style:none;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}
.no-js .slides > li:first-child {display: block;}
.flexslider {margin: 0 0 30px; position: relative; min-height:110px; zoom: 1; overflow:hidden;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 5px}
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 60px; height: 60px; margin:-20px 0 0 0; display: block; background:url('{ASSETS_IMAGES_PATH}arrows.png?design=spring') -25px 18px no-repeat; background-color: #222222; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 0; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; -webkit-border-radius: 50%; -moz-border-radius: 50%; -khtml-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%;}
.flex-direction-nav .flex-next, .flex-direction-nav .next {right: -50px;*right: -70px; }
.flex-direction-nav .flex-prev, .flex-direction-nav .prev {background:url('{ASSETS_IMAGES_PATH}arrows.png?design=spring') 20px 18px no-repeat; background-color: #222222; left: -50px; *left: -70px; }
.flexslider:hover .flex-next, .flexslider:hover .next {opacity: 0.8; right: 20px;}
.flexslider:hover .flex-prev, .flexslider:hover .prev {opacity: 0.8; left: 20px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover, .flexslider:hover .next:hover, .flexslider:hover .prev:hover  {opacity: 1; transform:rotate(360deg); -ms-transform:rotate(360deg); /* IE 9 */ -moz-transform:rotate(360deg); /* Firefox */ 
-webkit-transform:rotate(360deg); /* Safari and Chrome */ -o-transform:rotate(360deg); /* Opera */}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
/* END FlexSlider слайдер на главной */

/*Navbar*/

#5 SOGOOD

SOGOOD

    Пользователь

  • Пользователи
  • PipPip
  • 48 сообщений

Отправлено 14 Ноябрь 2017 - 19:51

Просмотр сообщенияRayLi (14 Ноябрь 2017 - 15:28) писал:

Здравствуйте.
В данном случае, попробуйте, пожалуйста, в шаблоне style.css найти следующий код:


/* Слайдер на главной странице jQuery FlexSlider */

/* Browser Resets */
.flex-container a:active,.flexslider a:active,.flex-container a:focus,.flexslider a:focus {outline: none;}
.slides,.flex-control-nav,.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* FlexSlider Necessary Styles */
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
.no-js .slides > li:first-child {display: block;}
/* FlexSlider Default Theme */
.flexslider {margin: 0 0 30px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 5px}
/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url({ASSETS_IMAGES_PATH}bg_direction_nav.png?design=autumn) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
/* END Слайдер на главной странице jQuery FlexSlider */

/*Navbar*/

И заменить его вот этим вот кодом:


/* Слайдер на главной странице jQuery FlexSlider */


/* FlexSlider слайдер на главной */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
.flexslider {margin: 0; padding: 0;}
.flexslider ul, .flexslider il li {list-style:none;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
.no-js .slides > li:first-child {display: block;}
.flexslider {margin: 0 0 30px; position: relative; min-height:110px; zoom: 1; overflow:hidden;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 5px}
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 60px; height: 60px; margin:-20px 0 0 0; display: block; background:url('{ASSETS_IMAGES_PATH}arrows.png?design=spring') -25px 18px no-repeat; background-color: #222222; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 0; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; -webkit-border-radius: 50%; -moz-border-radius: 50%; -khtml-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%;}
.flex-direction-nav .flex-next, .flex-direction-nav .next {right: -50px;*right: -70px; }
.flex-direction-nav .flex-prev, .flex-direction-nav .prev {background:url('{ASSETS_IMAGES_PATH}arrows.png?design=spring') 20px 18px no-repeat; background-color: #222222; left: -50px; *left: -70px; }
.flexslider:hover .flex-next, .flexslider:hover .next {opacity: 0.8; right: 20px;}
.flexslider:hover .flex-prev, .flexslider:hover .prev {opacity: 0.8; left: 20px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover, .flexslider:hover .next:hover, .flexslider:hover .prev:hover {opacity: 1; transform:rotate(360deg); -ms-transform:rotate(360deg); /* IE 9 */ -moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari and Chrome */ -o-transform:rotate(360deg); /* Opera */}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
/* END FlexSlider слайдер на главной */

/*Navbar*/
Белый фон пропал, так даже лучше, а вот точки нет

Прикрепленные изображения

  • 1212121212Безымянный.png

#6 metry

metry

    Активный участник

  • Модераторы
  • 884 сообщений

Отправлено 17 Ноябрь 2017 - 14:15

Добрый день. Для внесения изменений зайдите в Редактор шаблонов-->style.css и найдите:
.htmlDataBlock ul li {padding:0px !important;margin:3px 0px !important;list-style-type: disc;}

замените на:

.htmlDataBlock ul li {padding:0px !important;margin:3px 0px !important;}

#7 SOGOOD

SOGOOD

    Пользователь

  • Пользователи
  • PipPip
  • 48 сообщений

Отправлено 22 Ноябрь 2017 - 07:31

Просмотр сообщенияmetry (17 Ноябрь 2017 - 14:15) писал:

Добрый день. Для внесения изменений зайдите в Редактор шаблонов-->style.css и найдите:
.htmlDataBlock ul li {padding:0px !important;margin:3px 0px !important;list-style-type: disc;}

замените на:

.htmlDataBlock ul li {padding:0px !important;margin:3px 0px !important;}
Вот в чём проблема, каждый старый слайд виден на новом слайде

Прикрепленные изображения

  • 11122.png
  • 1133Безымянный.png

#8 SOGOOD

SOGOOD

    Пользователь

  • Пользователи
  • PipPip
  • 48 сообщений

Отправлено 27 Ноябрь 2017 - 09:25

Просмотр сообщенияRayLi (14 Ноябрь 2017 - 15:28) писал:

Здравствуйте.
В данном случае, попробуйте, пожалуйста, в шаблоне style.css найти следующий код:


/* Слайдер на главной странице jQuery FlexSlider */

/* Browser Resets */
.flex-container a:active,.flexslider a:active,.flex-container a:focus,.flexslider a:focus {outline: none;}
.slides,.flex-control-nav,.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* FlexSlider Necessary Styles */
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
.no-js .slides > li:first-child {display: block;}
/* FlexSlider Default Theme */
.flexslider {margin: 0 0 30px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 5px}
/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url({ASSETS_IMAGES_PATH}bg_direction_nav.png?design=autumn) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
/* END Слайдер на главной странице jQuery FlexSlider */

/*Navbar*/

И заменить его вот этим вот кодом:


/* Слайдер на главной странице jQuery FlexSlider */


/* FlexSlider слайдер на главной */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
.flexslider {margin: 0; padding: 0;}
.flexslider ul, .flexslider il li {list-style:none;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
.no-js .slides > li:first-child {display: block;}
.flexslider {margin: 0 0 30px; position: relative; min-height:110px; zoom: 1; overflow:hidden;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 5px}
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 60px; height: 60px; margin:-20px 0 0 0; display: block; background:url('{ASSETS_IMAGES_PATH}arrows.png?design=spring') -25px 18px no-repeat; background-color: #222222; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 0; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; -webkit-border-radius: 50%; -moz-border-radius: 50%; -khtml-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%;}
.flex-direction-nav .flex-next, .flex-direction-nav .next {right: -50px;*right: -70px; }
.flex-direction-nav .flex-prev, .flex-direction-nav .prev {background:url('{ASSETS_IMAGES_PATH}arrows.png?design=spring') 20px 18px no-repeat; background-color: #222222; left: -50px; *left: -70px; }
.flexslider:hover .flex-next, .flexslider:hover .next {opacity: 0.8; right: 20px;}
.flexslider:hover .flex-prev, .flexslider:hover .prev {opacity: 0.8; left: 20px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover, .flexslider:hover .next:hover, .flexslider:hover .prev:hover {opacity: 1; transform:rotate(360deg); -ms-transform:rotate(360deg); /* IE 9 */ -moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari and Chrome */ -o-transform:rotate(360deg); /* Opera */}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
/* END FlexSlider слайдер на главной */

/*Navbar*/
Вот в чём проблема, каждый старый слайд виден на новом слайде

Прикрепленные изображения

  • 11122.png
  • 1133Безымянный.png

#9 RayLi

RayLi

    Активный участник

  • Модераторы
  • 2 864 сообщений

Отправлено 27 Ноябрь 2017 - 10:30

Просмотр сообщенияsogoodfso (27 Ноябрь 2017 - 09:25) писал:

Вот в чём проблема, каждый старый слайд виден на новом слайде

Здравствуйте.
В данном случае Вам необходимо в самый конец шаблона style.css добавить следующий код:

.slides li {
transform: translate3d(-24px, 0px, 0px) !important;
}

Обратно в Главная



Темы с аналогичным тегами слайдер, главная

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Осень
  5. → Главная
  6. Privacy Policy