1

Ищу по типу такогослайдер на чистом css

Нашел похожий, теперь нужно сделать как на фото: 1- стрелочки по бокам чтобы отображались на всех слайдах (на 1 и 4 четвертом одна пропадает) 2- поменять их на вид как на фото (не знаю как их вообще искать и т.д.) Прошу помощи, плохо соображаю еще

	body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
/* Slider wrapper*/
.css-slider-wrapper {
  display: block;
  background: #FFF;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
/* Slider */
.slider {
  width: 100%;
  height: 100%;
  background: red;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  z-index: 0;
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  -webkit-transition: -webkit-transform 1600ms;
  transition: -webkit-transform 1600ms, transform 1600ms;
  -webkit-transform: scale(1);
  transform: scale(1);
}
/* each slide backgound color */  
.slide1 {
  background: #00bcd7;
  left: 0;
}
.slide2 {
  background: #009788;
  left: 100%
}
.slide3 {
  background: #ff5608;
  left: 200%
}
.slide4 {
  background: #607d8d;
  left: 300%;
}
.slider > div {
  text-align: center;
}
/* Slider inner slide effect */
.slider h2 {
  color: #FFF;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 45px;
  line-height: 120%;
  opacity: 0;
  -webkit-transform: translateX(500px);
  transform: translateX(500px);
}
.slider .button {
  color: #FFF;
  padding: 5px 30px;
  background: rgba(255,255,255,0.3);
  text-decoration: none;
  opacity: 0;
  font-size: 15px;
  line-height: 30px;
  display: inline-block;
  -webkit-transform: translateX(-500px);
  transform: translateX(-500px);
}
.slider h2, .slider .button {
  -webkit-transition: opacity 800ms, -webkit-transform 800ms;
  transition: transform 800ms, opacity 800ms;
  -webkit-transition-delay: 1s; /* Safari */
  transition-delay: 1s;
}
/* Next and Preive arrow */ 
.control {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  z-index: 55;
}
.control label {
  z-index: 0;
  display: none;
  text-align: center;
  line-height: 50px;
  font-size: 50px;
  color: #FFF;
  cursor: pointer;
  opacity: 0.2;
}
.control label:hover {
  opacity: 0.5;
}
.next {
  right: 1%;
}
.previous {
  left: 1%;
}
/* Slider Pagger */ 
.slider-pagination {
  position: absolute;
  bottom: 20px;
  width: 100%;
  left: 0;
  text-align: center;
  z-index: 1000;
}
.slider-pagination label {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: rgba(255,255,255,0.2);
  margin: 0 2px;
  border: solid 1px rgba(255,255,255,0.4);
  cursor: pointer;
}
/* Slider Pagger arrow event */
.slide-radio1:checked ~ .next .numb2, 
.slide-radio2:checked ~ .next .numb3, 
.slide-radio3:checked ~ .next .numb4, 
.slide-radio2:checked ~ .previous .numb1, 
.slide-radio3:checked ~ .previous .numb2, 
.slide-radio4:checked ~ .previous .numb3 {
  display: block;
  z-index: 1
}
/* Slider Pagger event */
.slide-radio1:checked ~ .slider-pagination .page1, 
.slide-radio2:checked ~ .slider-pagination .page2, 
.slide-radio3:checked ~ .slider-pagination .page3, 
.slide-radio4:checked ~ .slider-pagination .page4 {
  background: rgba(255,255,255,1)
}
/* Slider slide effect */
.slide-radio1:checked ~ .slider {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
.slide-radio2:checked ~ .slider {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.slide-radio3:checked ~ .slider {
  -webkit-transform: translateX(-200%);
  transform: translateX(-200%);
}
.slide-radio4:checked ~ .slider {
  -webkit-transform: translateX(-300%);
  transform: translateX(-300%);
}
.slide-radio1:checked ~ .slide1 h2,  
.slide-radio2:checked ~ .slide2 h2,  
.slide-radio3:checked ~ .slide3 h2,  
.slide-radio4:checked ~ .slide4 h2,  
.slide-radio1:checked ~ .slide1 .button,  
.slide-radio2:checked ~ .slide2 .button,  
.slide-radio3:checked ~ .slide3 .button,  
.slide-radio4:checked ~ .slide4 .button {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1
}

@media only screen and (max-width: 767px) {
.slider h2 {
  font-size: 20px;
}
.slider > div {
  padding: 0 2%
}
.control label {
  font-size: 35px;
}
.slider .button {
  padding: 0 15px;
}
}

	.clearfix:after {  content: "."; display:block; font-size:0; line-height:0; height:0; clear:both; visibility:hidden; }
	.clearfix { display:inline-block; }		
	* html .clearfix { height:1%; }
	.clearfix { display:block; }

	body {margin:0; background:#FFF url(../img/body.png); -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; padding:10px 2%; font:14px/24px 'Open Sans', Helvetica, Arial, sans-serif  ; color:#000;}	
	#wrapper { background:#FFF; width:1200px; margin:0 auto; border:solid 0px #E7E7E7; border-top:5px solid #0088cc; border-radius:6px; box-shadow:0 0 3px rgba(0,0,0,0.2), inset 0 4px 0 #ededed }
	#header { padding:30px 20px; border-bottom:solid 1px #e0e0e0; margin-bottom:20px; text-align:center; font-family:'Open Sans', sans-serif;}
	#logo { display:inline-block; font-weight:300;  margin:0 0 0px; font-size:30px; line-height:24px;  color:#000; text-decoration:none; position:relative;  }
	#logo span{ color:#0088cc;}
	
	section { padding:0 20px 20px}
	
    h2, h1{ font:300 22px/30px 'Open Sans', sans-serif;  margin:0 0 10px 0; padding:0}
    h1{ font-size:30px; line-height:40px; }
	h2 span{color:#0088cc;}
	.classname { display:block;  padding:20px;  border:solid 2px #CCC; text-align:center;}
    
    hr{ padding:0; margin:50px 0; height:1px; border:0; background:rgba(0,0,0,.2); box-shadow:0 1px 0 rgba(255,255,255, 0.8)  }
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Pure css based fullscreen slider Demo</title>
<meta name="Description" content="Pure css based fullscreen slider Demo">
<link href="css.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<div class="css-slider-wrapper">
  <input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
  <input type="radio" name="slider" class="slide-radio2" id="slider_2">
  <input type="radio" name="slider" class="slide-radio3" id="slider_3">
  <input type="radio" name="slider" class="slide-radio4" id="slider_4">
  <div class="slider-pagination">
    <label for="slider_1" class="page1"></label>
    <label for="slider_2" class="page2"></label>
    <label for="slider_3" class="page3"></label>
    <label for="slider_4" class="page4"></label>
  </div>
  <div class="next control">
    <label for="slider_1" class="numb1"><i class="fa fa-arrow-circle-right"></i></label>
    <label for="slider_2" class="numb2"><i class="fa fa-arrow-circle-right"></i></label>
    <label for="slider_3" class="numb3"><i class="fa fa-arrow-circle-right"></i></label>
    <label for="slider_4" class="numb4"><i class="fa fa-arrow-circle-right"></i></label>
  </div>
  <div class="previous control">
    <label for="slider_1" class="numb1"><i class="fa fa-arrow-circle-left"></i></label>
    <label for="slider_2" class="numb2"><i class="fa fa-arrow-circle-left"></i></label>
    <label for="slider_3" class="numb3"><i class="fa fa-arrow-circle-left"></i></label>
    <label for="slider_4" class="numb4"><i class="fa fa-arrow-circle-left"></i></label>
  </div>
  <div class="slider slide1">
    <div>
      <h2>Css Based slider</h2>
       </div>
  </div>
  <div class="slider slide2">
    <div>
      <h2>CSS Slider without use of any javascript or jQuery</h2>
       </div>
  </div>
  <div class="slider slide3">
    <div>
      <h2>Full screen animation slider</h2>
      </div>
  </div>
  <div class="slider slide4">
    <div>
      <h2>css3 slider</h2>
       </div>
  </div>
</div>
</body>
</html>

5
  • слайдер на чистом css, даже если это и возможно он будет очень херовым
    – Lofectr .
    2 янв 2020 в 8:51
  • благодарю за ваше мнение, учтемс )) 2 янв 2020 в 9:00
  • Евгения, используйте для этого JavaScript. Слайдер на CSS это особый трюк, его неудобно писать и редактировать, если нужно. Для новичка легче будет это писать на JavaScript 2 янв 2020 в 10:30
  • Я вас понял. У меня есть уже готовый на джс. Но нужно сделать именно на чистом ксс )) 2 янв 2020 в 10:46
  • добавил и жду помощи) 2 янв 2020 в 21:17

1 ответ 1

5

body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}


/* Slider wrapper*/

.css-slider-wrapper {
  display: block;
  background: #FFF;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}


/* Slider */

.slider {
  width: 100%;
  height: 100%;
  background: red;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  z-index: 0;
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  -webkit-transition: -webkit-transform 1600ms;
  transition: -webkit-transform 1600ms, transform 1600ms;
  -webkit-transform: scale(1);
  transform: scale(1);
}


/* each slide backgound color */

.slide1 {
  background: #00bcd7;
  left: 0;
}

.slide2 {
  background: #009788;
  left: 100%
}

.slide3 {
  background: #ff5608;
  left: 200%
}

.slide4 {
  background: #607d8d;
  left: 300%;
}

.slider>div {
  text-align: center;
}


/* Slider inner slide effect */

.slider h2 {
  color: #FFF;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 45px;
  line-height: 120%;
  opacity: 0;
  -webkit-transform: translateX(500px);
  transform: translateX(500px);
}

.slider .button {
  color: #FFF;
  padding: 5px 30px;
  background: rgba(255, 255, 255, 0.3);
  text-decoration: none;
  opacity: 0;
  font-size: 15px;
  line-height: 30px;
  display: inline-block;
  -webkit-transform: translateX(-500px);
  transform: translateX(-500px);
}

.slider h2,
.slider .button {
  -webkit-transition: opacity 800ms, -webkit-transform 800ms;
  transition: transform 800ms, opacity 800ms;
  -webkit-transition-delay: 1s;
  /* Safari */
  transition-delay: 1s;
}


/* Next and Preive arrow */

.control {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  z-index: 55;
}

.control label {
  z-index: 0;
  display: none;
  text-align: center;
  line-height: 50px;
  font-size: 50px;
  color: #FFF;
  cursor: pointer;
  opacity: 0.2;
}

.control label:hover {
  opacity: 0.5;
}

.next {
  right: 1%;
}

.previous {
  left: 1%;
}


/* Slider Pagger */

.slider-pagination {
  position: absolute;
  bottom: 20px;
  width: 100%;
  left: 0;
  text-align: center;
  z-index: 1000;
}

.slider-pagination label {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 2px;
  border: solid 1px rgba(255, 255, 255, 0.4);
  cursor: pointer;
}


/* Slider Pagger arrow event */

.slide-radio1:checked~.previous .numb1, /* ДОБАВИЛ */
.slide-radio1:checked~.next .numb2,
.slide-radio2:checked~.next .numb3,
.slide-radio3:checked~.next .numb4,
.slide-radio2:checked~.previous .numb1,
.slide-radio3:checked~.previous .numb2,
.slide-radio4:checked~.previous .numb3,
.slide-radio4:checked~.next .numb4 /* ДОБАВИЛ */ {
  display: block;
  z-index: 1
}


/* Slider Pagger event */

.slide-radio1:checked~.slider-pagination .page1,
.slide-radio2:checked~.slider-pagination .page2,
.slide-radio3:checked~.slider-pagination .page3,
.slide-radio4:checked~.slider-pagination .page4 {
  background: rgba(255, 255, 255, 1)
}


/* Slider slide effect */

.slide-radio1:checked~.slider {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.slide-radio2:checked~.slider {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.slide-radio3:checked~.slider {
  -webkit-transform: translateX(-200%);
  transform: translateX(-200%);
}

.slide-radio4:checked~.slider {
  -webkit-transform: translateX(-300%);
  transform: translateX(-300%);
}

.slide-radio1:checked~.slide1 h2,
.slide-radio2:checked~.slide2 h2,
.slide-radio3:checked~.slide3 h2,
.slide-radio4:checked~.slide4 h2,
.slide-radio1:checked~.slide1 .button,
.slide-radio2:checked~.slide2 .button,
.slide-radio3:checked~.slide3 .button,
.slide-radio4:checked~.slide4 .button {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1
}

@media only screen and (max-width: 767px) {
  .slider h2 {
    font-size: 20px;
  }
  .slider>div {
    padding: 0 2%
  }
  .control label {
    font-size: 35px;
  }
  .slider .button {
    padding: 0 15px;
  }
}
<div class="css-slider-wrapper">
  <input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
  <input type="radio" name="slider" class="slide-radio2" id="slider_2">
  <input type="radio" name="slider" class="slide-radio3" id="slider_3">
  <input type="radio" name="slider" class="slide-radio4" id="slider_4">
  <div class="slider-pagination">
    <label for="slider_1" class="page1"></label>
    <label for="slider_2" class="page2"></label>
    <label for="slider_3" class="page3"></label>
    <label for="slider_4" class="page4"></label>
  </div>
  
  <!-- ЗДЕСЬ ВНУТРИ LABEL ПОЛОЖИШЬ НУЖНЫЕ ТЕБЕ СТРЕЛКИ --> 
  <div class="next control">
    <label for="slider_1" class="numb1">&gt;</label>
    <label for="slider_2" class="numb2">&gt;</label>
    <label for="slider_3" class="numb3">&gt;</label>
    <label for="slider_4" class="numb4">&gt;</label>
  </div>
  <div class="previous control">
    <label for="slider_1" class="numb1">&lt;</label>
    <label for="slider_2" class="numb2">&lt;</label>
    <label for="slider_3" class="numb3">&lt;</label>
    <label for="slider_4" class="numb4">&lt;</label>
  </div>
  <!-- ЗДЕСЬ ВНУТРИ LABEL ПОЛОЖИШЬ НУЖНЫЕ ТЕБЕ СТРЕЛКИ --> 
  
  
  <div class="slider slide1">
    <div>
      <h2>Css Based slider</h2>
    </div>
  </div>
  <div class="slider slide2">
    <div>
      <h2>CSS Slider without use of any javascript or jQuery</h2>
    </div>
  </div>
  <div class="slider slide3">
    <div>
      <h2>Full screen animation slider</h2>
    </div>
  </div>
  <div class="slider slide4">
    <div>
      <h2>css3 slider</h2>
    </div>
  </div>
</div>

9
  • можно уточнить у вас по поводу стрелок перелистывания сбоку у слайдов, как можно их оставить на всех слайдах ( а то пропадает на 1 и 4 одна)? 2 янв 2020 в 22:29
  • @EvgeniyReva я там написал комменты где поменял.
    – user355286
    2 янв 2020 в 23:21
  • благодарю сердечно) 2 янв 2020 в 23:43
  • @EvgeniyReva ну и стоит сказать, что подобные слайдеры нужны лишь для того, что бы показать скилуху его автора. На js это делается в пару строк.
    – user355286
    2 янв 2020 в 23:46
  • Я не понял ни один вопрос.
    – user355286
    3 янв 2020 в 13:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.