Как сделать отдельное переключение картинок в блоке? - HTML, CSS - Ответ 8419355

@Jenya7771 · Регистрация: 30.11.2015

Author24 — интернет-сервис помощи студентам

Как сделать отдельное переключение картинок в блоке? Нужно чтобы 3 слайдера переключались независимо друг от друга!
http://jsfiddle.net/a068hw55/333/

HTML5

                <div class="bl-1">
                
                
                
                
                
                
                
                        <div class="wrappers-1">
    <input type="radio" name="point" id="slide1-1" checked>
    <input type="radio" name="point" id="slide2-1">
    <input type="radio" name="point" id="slide3-1">
    <input type="radio" name="point" id="slide4-1">
    <input type="radio" name="point" id="slide5-1">
    <div class="slider-1">
        <div class="slides-1 slide1-1"></div>
        <div class="slides-1 slide2-1"></div>
        <div class="slides-1 slide3-1"></div>
        <div class="slides-1 slide4-1"></div>
        <div class="slides-1 slide5-1"></div>
    </div>  
    <div class="controls-1">
        <label for="slide1-1"></label>
        <label for="slide2-1"></label>
        <label for="slide3-1"></label>
        <label for="slide4-1"></label>
        <label for="slide5-1"></label>
    </div>
</div>
                
                
                
                
                
                </div>
                <div class="bl-2">
                
                
                        <div class="wrappers-2">
    <input type="radio" name="point" id="slide1-2" checked>
    <input type="radio" name="point" id="slide2-2">
    <input type="radio" name="point" id="slide3-2">
    <input type="radio" name="point" id="slide4-2">
    <input type="radio" name="point" id="slide5-2">
    <div class="slider-2">
        <div class="slides-2 slide1-2"></div>
        <div class="slides-2 slide2-2"></div>
        <div class="slides-2 slide3-2"></div>
        <div class="slides-2 slide4-2"></div>
        <div class="slides-2 slide5-2"></div>
    </div>  
    <div class="controls-2">
        <label for="slide1-2"></label>
        <label for="slide2-2"></label>
        <label for="slide3-2"></label>
        <label for="slide4-2"></label>
        <label for="slide5-2"></label>
    </div>
</div>

CSS

    .bl-1 {
        border: solid 1px #000;
        width: 290px;
        height:315px;
        float:left;
    }
.bl-2{
        border: solid 1px #000;
        width: 290px;
        height:315px;
        float: left;
        margin-left:10px;
}
.bl-3{
        border: solid 1px #000;
        width: 290px;
        height:315px;
        margin-left:610;
}
 
    
    
    
    
    
    
    
    
    
    
    
/*первый мини слайдер*/
    .wrappers-1 {
    height: 290px;
    position: relative;
    width: 290px;
}
 
.slider-1 {
    height: inherit;
    overflow: hidden;
    position: relative;
    width: inherit;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    -o-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}
 
.slides-1 {
    height: inherit;
    opacity: 0;
    position: absolute;
    width: inherit;
    z-index: 0;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
    -moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
    -o-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
    transition: transform ease-in-out .5s, opacity ease-in-out .5s;
}
 
.slide1-1 { background-image: url([url]http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg);[/url] }
.slide2-1 { background-image: url([url]http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg);[/url] }
.slide3-1 { background-image: url([url]http://habrastorage.org/files/663/6b1/d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg);[/url] }
.slide4-1 { background-image: url([url]http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg);[/url] }
.slide5-1 { background-image: url([url]http://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg);[/url] }
 
#slide1-1:checked ~ .slider-1> .slide1-1,
#slide2-1:checked ~ .slider-1 > .slide2-1,
#slide3-1:checked ~ .slider-1 > .slide3-1,
#slide4-1:checked ~ .slider-1 > .slide4-1,
#slide5-1:checked ~ .slider-1 > .slide5-1 {
    opacity: 1;
    z-index: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
 
.wrappers-1 > input {
    display: none;
}
 
.wrappers-1 .controls-1 {
    left: 50%;
    margin-left: -98px;
    position: absolute;
}
 
.wrappers-1 label {
    cursor: pointer;
    display: inline-block;
    height: 8px;
    margin: 9px 12px 0 16px;
    position: relative;
    width: 8px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: background ease-in-out .5s;
    -moz-transition: background ease-in-out .5s;
    -o-transition: background ease-in-out .5s;
    transition: background ease-in-out .5s;
}
 
.wrappers-1 label:hover, 
#slide1-1:checked ~ .controls-1 label:nth-of-type(1),
#slide2-1:checked ~ .controls-1 label:nth-of-type(2),
#slide3-1:checked ~ .controls-1 label:nth-of-type(3),
#slide4-1:checked ~ .controls-1 label:nth-of-type(4),
#slide5-1:checked ~ .controls-1 label:nth-of-type(5) {
    background: #ddd;
}
 
.wrappers-1 label:after {
    border: 2px solid #ddd;
    content: " ";
    display: block;
    height: 12px;
    left: -4px;
    position: absolute;
    top: -4px;
    width: 12px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
/*Второй мини слайдер*/
    .wrappers-2 {
    height: 290px;
    position: relative;
    width: 290px;
}
 
.slider-2 {
    height: inherit;
    overflow: hidden;
    position: relative;
    width: inherit;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    -o-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}
 
.slides-2 {
    height: inherit;
    opacity: 0;
    position: absolute;
    width: inherit;
    z-index: 0;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
    -moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
    -o-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
    transition: transform ease-in-out .5s, opacity ease-in-out .5s;
}
 
.slide1-2 { background-image: url([url]http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg);[/url] }
.slide2-2 { background-image: url([url]http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg);[/url] }
.slide3-2 { background-image: url([url]http://habrastorage.org/files/663/6b1/d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg);[/url] }
.slide4-2 { background-image: url([url]http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg);[/url] }
.slide5-2 { background-image: url([url]http://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg);[/url] }
 
#slide1-2:checked ~ .slider-2> .slide1-2,
#slide2-2:checked ~ .slider-2 > .slide2-2,
#slide3-2:checked ~ .slider-2 > .slide3-2,
#slide4-2:checked ~ .slider-2 > .slide4-2,
#slide5-2:checked ~ .slider-2 > .slide5-2 {
    opacity: 1;
    z-index: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
 
.wrappers-2 > input {
    display: none;
}
 
.wrappers-2 .controls-2 {
    left: 50%;
    margin-left: -98px;
    position: absolute;
}
 
.wrappers-2 label {
    cursor: pointer;
    display: inline-block;
    height: 8px;
    margin: 9px 12px 0 16px;
    position: relative;
    width: 8px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: background ease-in-out .5s;
    -moz-transition: background ease-in-out .5s;
    -o-transition: background ease-in-out .5s;
    transition: background ease-in-out .5s;
}
 
.wrappers-2 label:hover, 
#slide1-2:checked ~ .controls-2 label:nth-of-type(1),
#slide2-2:checked ~ .controls-2 label:nth-of-type(2),
#slide3-2:checked ~ .controls-2 label:nth-of-type(3),
#slide4-2:checked ~ .controls-2 label:nth-of-type(4),
#slide5-2:checked ~ .controls-2 label:nth-of-type(5) {
    background: #ddd;
}
 
.wrappers-2 label:after {
    border: 2px solid #ddd;
    content: " ";
    display: block;
    height: 12px;
    left: -4px;
    position: absolute;
    top: -4px;
    width: 12px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

Вернуться к обсуждению:
Как сделать отдельное переключение картинок в блоке? HTML, CSS