<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scroller</title>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.simplyscroll.min.js"></script>
<script>
// $(document).ready(function(){
// $(window).on('resize',function(){
// var width_size = window.outerWidth;
// if(width_size <=700){
// $("#scroller").simplyScroll();
// $("#scroller2").simplyScroll({direction:'backwards'});
// }
// else{
// $("#scroller").simplyScroll({direction:'backwards'});
// $("#scroller2").simplyScroll();
// }
// })
// })
$(function(){
$("#scroller").simplyScroll();
$("#scroller2").simplyScroll({direction:'backwards'});
});
</script>
<style>
/* Reset */
* {margin: 0;padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
a {color: inherit; text-decoration: inherit;}
li {list-style: none;}
address, em, i {font-style: normal;}
button {background: none; border: none;}
img {vertical-align: middle;}
/* layout */
.simply-scroll-container {position: relative; margin-bottom: 40px; width: 100%;}
.simply-scroll-clip {position: relative; overflow: hidden;}
.simply-scroll-list {display: flex; flex-wrap: wrap;}
.simply-scroll-list li {width: 310px; margin:0 20px; border-radius: 30px; overflow: hidden; position: relative;}
.simply-scroll-list li img {width: 100%;}
.simply-scroll-list li .layer {position: absolute; left: 0; top:0; background: #3020ef; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; color:#fff; opacity: 0;}
.simply-scroll-list li:hover .layer {opacity: 1;}
</style>
<!-- <style>
/* Reset */
* {
margin: 0;
padding: 0;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{
margin:0;
padding:0;
}
a {
color: inherit;
text-decoration: inherit;
}
li {
list-style: none;
}
address, em, i {
font-style: normal;
}
button {
background: none;
border: none;
}
img {
vertical-align: middle;
}
.simply-scroll-container{
position:relative;
width:100%;
margin-bottom:40px;
}
.simply-scroll-clip{
position: relative;
overflow:hidden;
}
.simply-scroll-list{
display:flex;
flex-wrap: wrap;
}
.simply-scroll-list li{
width:310px;
margin:0 20px;
border-radius: 30px;
overflow: hidden;
position: relative;
}
.simply-scroll-list li img{
width:100%;
}
.simply-scroll-list li .layer{
position:absolute;
left:0;
top:0;
background: #3020ef;
width:100%;
height: 100%;
padding:20px;
box-sizing: border-box;
color:#fff;
opacity: 0;
}
.simply-scroll-list li:hover .layer{
opacity: 1;
}
</style> -->
</head>
<body>
<ul id="scroller">
<li>
<img src="img/img_1.gif" alt="카카오톡gif">
</li>
<li>
<img src="img/img_2.jpg" alt="집모양">
<div class="layer">
<p>마우스오버</p>
</div>
</li>
<li>
<img src="img/img_3.gif" alt="">
</li>
<li>
<img src="img/img_4.jpg" alt="">
<div class="layer">
<p>마우스오버</p>
</div>
</li>
<li>
<img src="img/img_5.gif" alt="">
<div class="layer">
<p>마우스오버</p>
</div>
</li>
<li>
<img src="img/img_6.jpg" alt="">
</li>
<li>
<img src="img/img_7.gif" alt="">
</li>
</ul>
<ul id="scroller2">
<li>
<img src="img/img_8.jpg" alt="">
<div class="layer">
<p>마우스오버</p>
</div>
</li>
<li>
<img src="img/img_9.gif" alt="">
</li>
<li>
<img src="img/img_10.jpg" alt="">
<div class="layer">
<p>마우스오버</p>
</div>
</li>
<li>
<img src="img/img_11.gif" alt="">
</li>
<li>
<img src="img/img_12.jpg" alt="">
<div class="layer">
<p>마우스오버</p>
</div>
</li>
<li>
<img src="img/img_13.gif" alt="">
</li>
<li>
<img src="img/img_14.jpg" alt="">
<div class="layer">
<p>마우스오버</p>
</div>
</li>
</ul>
</body>
</html>