چطور میشه اسلایدر با چند عکس ساخت بدون استفاده از جاوا اسکریپت و با تگ <input> که نوع radio هم باشه با کلید چپ و راست هم بین عکسا سویچ کرد
من فقط در حد سویچ بین دو عکس پیش رفتم که راحته و ایده ای به ذهنم نمیرسه برا ادامه ممنون میشم راهنمایی کنید
5 پاسخ
1
سلام. کتابخونه های از قبل نوشته شده رواگر ببینید حتما کمک میکنه بهتون.
مثلا https://github.com/drygiel/csslider یا https://corpocrat.com/2015/12/09/20-cool-pure-css-sliders-without-jqueryjavascript/
0
ممنون از راهنماییتون ولی این یه چالشی هست که استادمون داده و فقط هم باید از input نوع radio استفاده بشه برای سویچ به چپ و راست
0
خواهش میکنم. خب همینه دیگه اینو هم ببین: https://codepen.io/napssy/pen/doajrP
فقط از radio استفاده شده
1
لینک دوم رو ندیده بودم ممنونم از راهنماییتون تهش تونستم بنویسم. لطف کردید
#slider {
overflow: hidden;
position: relative;
border: 1px solid #ccc;
width: 1170px;
height: 358px;
margin: 100px auto;
}
#slider>#gal {
transition: 1.3s;
position: relative;
left: 0;
width: 500%;
height: 100%;
}
#slider>#gal>.items {
float: left;
width: 20%;
}
#slider>#gal>.items>img {
width: 100%;
height: 100%;
}
#right1 {
transition: 0.2s;
background: url("pic/if_arrow-right-01_186409.png")rgba(255, 255, 255, 1) no-repeat 50% 50%;
background-size: 80%;
border-radius: 50%;
position: absolute;
top: 140px;
right: 0px;
width: 50px;
height: 50px;
z-index: 20;
display: block;
}
#right2,
#right3,
#right4,
#right5 {
transition: 0.2s;
background: url("pic/if_arrow-right-01_186409.png")rgba(255, 255, 255, 1) no-repeat 50% 50%;
background-size: 80%;
border-radius: 50%;
position: absolute;
top: 140px;
right: 0px;
width: 50px;
height: 50px;
z-index: 20;
display: none;
}
#left1 {
transition: 0.2s;
background: url("pic/if_arrow-left-01_186410.png")rgba(255, 255, 255, 1) no-repeat 50% 50%;
background-size: 80%;
border-radius: 50%;
position: absolute;
top: 140px;
left: 0px;
width: 50px;
height: 50px;
z-index: 20;
display: block;
}
#left2,
#left3,
#left4,
#left5 {
transition: 0.2s;
background: url("pic/if_arrow-left-01_186410.png")rgba(255, 255, 255, 1) no-repeat 50% 50%;
background-size: 80%;
border-radius: 50%;
position: absolute;
top: 140px;
left: 0px;
width: 50px;
height: 50px;
z-index: 20;
display: none;
}
#r1:checked~#gal {
left: -100%;
}
#r1:checked~#right2,
#r1:checked~#left2 {
display: block
}
#r2:checked~#gal {
left: -200%;
}
#r2:checked~#right3,
#r2:checked~#left3 {
display: block
}
#r3:checked~#gal {
left: -300%;
}
#r3:checked~#right4,
#r3:checked~#left4 {
display: block
}
#r4:checked~#gal {
left: -400%;
}
#r4:checked~#right5,
#r4:checked~#left5 {
display: block
}
#l3:checked~#gal {
left: -100%
}
#l3:checked~#right2,
#l3:checked~#left2 {
display: block
}
#l4:checked~#gal {
left: -200%
}
#l4:checked~#right3,
#l4:checked~#left3 {
display: block
}
#l5:checked~#gal {
left: -300%
}
#l5:checked~#right4,
#l5:checked~#left4 {
display: block
}
#l1:checked~#gal {
left: -400%
}
#l1:checked~#right5,
#l1:checked~#left5 {
display: block
}
input {
display: none;
}
آخرین ویرایش: 17-05-2018 ???? 01:18، توسط code2heaven
0
HTML
<body>
<div id="slider">
<input type="radio" id="r1" name="lol">
<input type="radio" id="r2" name="lol">
<input type="radio" id="r3" name="lol">
<input type="radio" id="r4" name="lol">
<input type="radio" id="r5" name="lol">
<input type="radio" id="l1" name="lol">
<input type="radio" id="l2" name="lol">
<input type="radio" id="l3" name="lol">
<input type="radio" id="l4" name="lol">
<input type="radio" id="l5" name="lol">
<label for="r1" id="right1"></label>
<label for="r2" id="right2"></label>
<label for="r3" id="right3"></label>
<label for="r4" id="right4"></label>
<label for="r5" id="right5"></label>
<label for="l1" id="left1"></label>
<label for="l2" id="left2"></label>
<label for="l3" id="left3"></label>
<label for="l4" id="left4"></label>
<label for="l5" id="left5"></label>
<div id="gal">
<div class="items">
<img src="pic/1012_980_AtomSeries.v_1.jpg">
</div>
<div class="items">
<img src="pic/1012_980_PanzerSpeaker.v_1.jpg">
</div>
<div class="items">
<img src="pic/j.jpg">
</div>
<div class="items">
<img src="pic/main.jpg">
</div>
<div class="items">
<img src="pic/NVIDIA-SHIELDTV_Banner980x300.png">
</div>
</div>
</div>
</body>
سوال برنامه نویسی دارید؟
ندونستن عیب نیست، نپرسیدن چرا!