메인 슬라이드 속도 변경?
관련링크
본문
메인 슬라이드 속도를 변경하고 싶은데요..
어디를 수정해야 할까요??
.laIntro {
width:100%;
position:relative;
padding:0;
}
.brand-heading {
font-size: 2em;
}
.laIntro-text {
font-size: 2em;
}
/* ==== slider ==== */
.sy-caption-wrap {
position: absolute;
bottom: 2em;
top: 45%;
z-index: 5;
left: 50%;
speed: 1000;
}
.sy-caption-wrap .sy-caption {
position: relative;
left: -50%;
background-color: transparent;
color: #fff;
text-shadow: -1px 0 1px #111;
font-size: 3.2em;
text-transform: uppercase;
line-height: 1.1em;
text-align: center;
font-weight: 600;
padding: 0;
speed: 1000;
}
.sy-caption-wrap .sy-caption a {
margin-top: 10px;
}
.sy-slide div a.slide-btn {
border:1px solid #ff0000;
margin-top: 30px;
}
.brand-heading {
font-size: 20px;
}
@media (min-width: 979px) and (max-width: 1200px) {
}
@media (max-width: 767px) {
.sy-controls {
display: block;
}
.sy-controls li {
min-width: 2.1em;
}
.sy-controls li a:after {
width: 1.4em;
height: 1.4em;
}
.sy-caption-wrap .sy-caption {
font-size:1.8em;
}
}
@media (max-width: 480px) {
.sy-caption-wrap {
}
.sy-caption-wrap .sy-caption {
}
.sy-caption-wrap .sy-caption {
font-size:1.3em;
}
}
@media (max-width: 360px) {
}
답변 3
별도의 사이트링크가 있으셨네요.
아래와 같은 부분을 찾으시어
주석으로 표시한부분을 추가하세요.
<script>
$(function(){
$('ul#slippry').slippry({
pager: false,
speed: 800, //전환속도 추가 milliseconds
onSliderLoad: function(index){
$('ul#slippry > li').show();
return this;
},
onSlideBefore: function(slide, old_index, new_index){
var $object = $('ul#slippry > li').eq(new_index);
var $h1_class = $object.find('h1').attr('rel');
var $h2_class = $object.find('h2').attr('rel');
var $h3_class = $object.find('h3').attr('rel');
$object.find('h1').removeClass('animated').removeClass($h1_class).hide();
$object.find('h2').removeClass('animated').removeClass($h2_class).hide();
$object.find('h3').removeClass('animated').removeClass($h3_class).hide();
return this;
},
onSlideAfter: function(slide, old_index, new_index){
var $object = $('ul#slippry > li').eq(new_index);
var $h1_class = $object.find('h1').attr('rel');
var $h2_class = $object.find('h2').attr('rel');
var $h3_class = $object.find('h3').attr('rel');
$object.find('h1').show().addClass('animated').addClass($h1_class);
$object.find('h2').show().addClass('animated').addClass($h2_class);
$object.find('h3').show().addClass('animated').addClass($h3_class);
return this;
}
});
});
</script>
css 에서 수정하는건 아니고 영카트라면 사용하시는 테마의
skin/shop/basic/mainbanner.10.skin.php 파일의 (경로는 환경마다 틀려질수 있음)
하단쪽을 참조하시면 이런식으로 있을겁니다
var owl = $('.main_banner_owl').owlCarousel({
items:1,
loop:is_loop,
margin:0,
nav:false,
autoHeight:true,
autoplay:true,
autoplayTimeout:5000, // 5000은 5초
autoplayHoverPause:true,
dotsContainer: '.carousel-custom-dots',
onChanged:function(event){
owl_show_page(event);
},
});
그런데 테마 마다 메인 롤링 플러그인을 사용하는게 틀릴수있으니
어떤테마를 사용하시는지를 정확히 알아야 도움을 드릴수 있을듯 합니다.
