vticker(브이티커) 리스트 롤링 스크립트 질문할게요!
본문
현재 하드코딩으로 웹에서 리스트가 출력된 상태구요 js와 스크립트를 이용해서
세로 롤링을 하려고 하는데 저번주 금요일저녁부터 끙끙 해메고 있는데 자문좀 구하고 싶습니다!
소스랑 웹상태 첨부하겠습니다
<div class="row">
<div class="col-md-4">
<!--시작-->
<div class="img" style="margin-top:30px;"><img width="100%" class="img-responsive" src="/alen/common/img_ad_phone03.jpg" alt=""></div>
<?$tdate=date("Ymd");?>
<div class="mainReal">
<h3>실시간 상담신청</h3>
<div class="top">
<ul>
<li>접수일</li>
<li>이름</li>
<li>신청현황</li>
<li>사은품</li>
</ul>
</div>
<div class="content" >
<div class="list_roll" id="gaetong_realtime">
<ul>
<li><?=$tdate?></li>
<li>이**</li>
<li class="mainRealBtn">설치완료</li>
<li>입금대기</li>
</ul>
<ul>
<li><?=$tdate?></li>
<li>최**</li>
<li class="mainRealBtn">설치완료</li>
<li>배송예정</li>
</ul>
<ul>
<li><?=$tdate?></li>
<li>박**</li>
<li class="mainRealBtn">설치완료</li>
<li>배송예정</li>
</ul>
<ul>
<li><?=$tdate?></li>
<li>정**</li>
<li class="mainRealBtn">설치완료</li>
<li>입금대기</li>
</ul>
</div>
</div>
</div>
<!--끝-->
<script type="text/javascript" src="/js/jquery.vticker.js"></script>
<script type="text/javascript">
$(function(){
$('.content .content2').vTicker({
// 스크롤 속도(default: 700)
speed: 1000,
// 스크롤 사이의 대기시간(default: 4000)
pause: 1000,
// 스크롤 애니메이션
animation: 'fade',
// 마우스 over 일때 멈출 설정
mousePause: false,
// 한번에 보일 리스트수(default: 2)
showItems: 6,
// 스크롤 컨테이너 높이(default: 0)
height: 160,
// 아이템이 움직이는 방향, up/down (default: up)
direction: 'up'
});
CSS.STYLE
/* list_roll */
.list_roll {
width: 100%;
padding: 0 25px;
}
.list_roll ul {
margin: 10px 0 0;
padding: 0px;
width: 100%;
}
.list_roll li {
cursor: pointer;
margin: 0 0 5px;
width: 100%;
padding: 0;
height: 38px;
}
.list_roll dl {
width: 100%;
height: 35px;
position: relative;
display: block;
text-align: left;
border-radius: 30px;
overflow: hidden;
box-shadow: 0 10px 15px rgba(23,3,79,0.1);
background: rgba(255,255,255,.8);
transition: box-shadow 0.1s ease, background-color 0.1s ease;
-webkit-transition: box-shadow 0.1s ease, background-color 0.1s ease;
}
.list_roll dl dt,
.list_roll dl dd {
font-size: 14px;
display: inline-block;
float: left;
}
.list_roll dl dt {
text-align: center;
width: 18%;
}
.list_roll dl dt span.icon {
width: 52px;
height: 22px;
display: inline-block;
text-indent: -99999999em;
/*position: absolute;
top: 8px;
left: 30px;*/
position: relative;
top: 8px;
overflow: hidden;
background: url("/images/new_ico.png") no-repeat 0 0;
-webkit-background-size: 52px 22px;
background-size: 52px 22px;
}
.list_roll dl dd {
text-align: center;
color: #000;
position: relative;
font-weight: bold;
line-height: 40px;
width: 20%;
}
.list_roll dl dd:first-child {
padding-left: 18%;
}
@media (max-width: 1200px) {
.list_roll {width: 100%; padding: 0;}
.list_roll dl dt {
max-width: 190px;
}
}
@media (max-width: 992px) {
.list_roll ul {
margin: 0;
}
.list_roll dl dt {
max-width: 230px;
}
.list_roll dl dt,
.list_roll dl dd {
font-size: 14px;
}
.list_roll li {
margin-bottom: 7px;
}
}
위 사진과 같이 스크립트 내용을 주석처리하면 하드코딩 리스트가 출력됩니다
답변 2
저도 잘은 모르지만 지금 위에 잇는 코드만 봐서는 vTicker 이게 돌아가는 형식이 안맞는거 같은데요
기본뼈대만 넣고 실행해보세요 나오는지 확인하시고 그외 추가 css 적인거 만지면 어떠실지..
css 작업을 하더라도 li 안에서 해야 하지 않을가 싶어요..
고수분이 있다면 더 최적화된 방법이 있겠지만요
<div id="example">
<ul>
<li>롤</li>
<li>롤</li>
<li>롤</li>
</ul>
</div>
<script>
$(function() {
$('#example').vTicker('init', {
speed: 400,
pause: 1000,
showItems: 2,
padding: 4
});
});
</script>
.content .content2 가 아니라 #gaetong_realtime 으로 해야 하지 않을가요?
그리고 div 안에 ul 이거 하나로 해도 될듯한데요
클래스랑 아이디 이거저거 바꿔보고 css 랑 맞춰가면서 안해본게 없는 것 같습니다
말씀하신대로 ul도 각각이 아니라 div 안에 전체하나로 포함시켜서도 해봤습니다
리스트 형태만 더 이상해지거나 높이만 변하고 달라지는게 없었습니다
