Содержимое слайда тоже перемещалось

146
19 ноября 2019, 17:00

Окончательно запуталась, нужно, чтобы на каждом слайде был свой текст и кнопка. у меня либо все тексты на одном сладйе, либо все тексты на всех слайдах. Как быть?

#slider { 
  height: 550px; 
  margin: 100px auto 0; 
  position: absolute; 
  width: 1250px; 
  right: 50px; 
  top: 150px; 
} 
 
 
} 
#slides { 
  background-color: #000; 
  height: inherit; 
  overflow: hidden; 
  position: relative; 
  width: inherit; 
} 
.inner { 
  width: 500%; 
} 
.inner:after { 
  content: ''; 
  display: block; 
  height: 0; 
  clear: both; 
} 
 
/*1слайд*/ 
.page-a:after { 
  content: ''; 
  display: block; 
  height: 0; 
  clear: both; 
} 
.page-a { 
  float: left; 
  width: 20%; 
  display: inline-block; 
} 
.page-a img { 
  width: 1250px; 
  height: 550px; 
  opacity: 0.7; 
} 
.page-a .page-1 { 
  display: block; 
  position: absolute; 
  left: 150px; 
  bottom: 200px; 
  font-family: "Roboto Regular" sans-serif; 
  font-size: 24px; 
  line-height: 1.5; 
  /* width:100%;*/ 
   
  color: #fff; 
  font-weight: normal; 
  box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
} 
.page-1 span { 
  font-family: "Roboto Regular" sans-serif; 
  font-size: 18px; 
  position: relative; 
  bottom: 15px; 
} 
.page-a .page-2 { 
  display: block; 
  position: absolute; 
  left: 150px; 
  bottom: 125px; 
  font-family: 'Arial Regular', sans-serif; 
  font-size: 18px; 
  color: #000; 
  border: 1px solid #fecd39; 
  padding: 15px 21px; 
  background-color: #fecd39; 
  box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
} 
.page-2 a { 
  color: #000; 
} 
.page-2 a:hover { 
  background-color: #e2aa00; 
  border-color: #e2aa00; 
} 
.page-2 a:active { 
  background-color: #e2aa00; 
  border-color: #785a00; 
  box-shadow: inset 0px 2px 3px 2px rgba(120, 90, 0, 0.5); 
} 
 
/*2 слайд*/ 
.page-b:after { 
  content: ''; 
  display: block; 
  height: 0; 
  clear: both; 
} 
.page-b { 
  float: left; 
  width: 20%; 
  display: inline-block; 
} 
.page-b img { 
  width: 1250px; 
  height: 550px; 
  opacity: 0.7; 
} 
.page-b .page-3 { 
  display: block; 
  position: absolute; 
  left: 150px; 
  bottom: 200px; 
  font-family: "Roboto Regular" sans-serif; 
  font-size: 24px; 
  line-height: 1.5; 
  /* width:100%;*/ 
   
  color: #fff; 
  font-weight: normal; 
  box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
} 
.page-3 span { 
  font-family: "Roboto Regular" sans-serif; 
  font-size: 18px; 
  position: relative; 
  bottom: 15px; 
} 
.page-b .page-4 { 
  display: block; 
  position: absolute; 
  left: 150px; 
  bottom: 125px; 
  font-family: 'Arial Regular', sans-serif; 
  font-size: 18px; 
  color: #000; 
  border: 1px solid #fecd39; 
  padding: 15px 21px; 
  background-color: #fecd39; 
  box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
} 
.page-4 a { 
  color: #000; 
} 
.page-4 a:hover { 
  background-color: #e2aa00; 
  border-color: #e2aa00; 
} 
.page-4 a:active { 
  background-color: #e2aa00; 
  border-color: #785a00; 
  box-shadow: inset 0px 2px 3px 2px rgba(120, 90, 0, 0.5); 
} 
 
/*3 слайд*/ 
.page-c:after { 
  content: ''; 
  display: block; 
  height: 0; 
  clear: both; 
} 
.page-c { 
  float: left; 
  width: 20%; 
  display: inline-block; 
} 
.page-c img { 
  width: 1250px; 
  height: 550px; 
  opacity: 0.7; 
} 
.page-c .page-5 { 
  display: block; 
  position: absolute; 
  left: 150px; 
  bottom: 200px; 
  font-family: "Roboto Regular" sans-serif; 
  font-size: 24px; 
  line-height: 1.5; 
  /* width:100%;*/ 
   
  color: #fff; 
  font-weight: normal; 
  box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
} 
.page-5 span { 
  font-family: "Roboto Regular" sans-serif; 
  font-size: 18px; 
  position: relative; 
  bottom: 15px; 
} 
.page-c .page-6 { 
  display: block; 
  position: absolute; 
  left: 150px; 
  bottom: 125px; 
  font-family: 'Arial Regular', sans-serif; 
  font-size: 18px; 
  color: #000; 
  border: 1px solid #fecd39; 
  padding: 15px 21px; 
  background-color: #fecd39; 
  box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
} 
.page-6 a { 
  color: #000; 
} 
.page-6 a:hover { 
  background-color: #e2aa00; 
  border-color: #e2aa00; 
} 
.page-6 a:active { 
  background-color: #e2aa00; 
  border-color: #785a00; 
  box-shadow: inset 0px 2px 3px 2px rgba(120, 90, 0, 0.5); 
} 
#overflow { 
  overflow: hidden; 
} 
#slider input { 
  display: none; 
} 
#controls { 
  left: 50%; 
  margin-left: -68px; 
  top: 50px; 
  position: absolute; 
} 
#controls label { 
  z-index: 15; 
  cursor: pointer; 
  display: inline-block; 
  height: 8px; 
  margin: 25px 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; 
} 
 
/* перелистывание фотографий */ 
#slide1:checked~#controls label:nth-child(2), 
#slide2:checked~#controls label:nth-child(3), 
#slide5:checked~#controls label:nth-child(1) { 
  /* первые пять значений создадут стрелку справа*/ 
   
  width: 22px; 
  height: 42px; 
  /*border-top: 20px solid transparent; 
border-left: 20px solid #333; 
border-bottom: 20px solid transparent;*/ 
   
  background: url('next.png') no-repeat; 
  float: right; 
  /*в правый угол*/ 
   
  margin-right: -30px; 
  /* за блок*/ 
   
  display: block; 
  position: relative; 
  right: -600px; 
  top: 170px; 
} 
#slide1:checked~#controls label:nth-child(3), 
#slide2:checked~#controls label:nth-child(1), 
#slide3:checked~#controls label:nth-child(2) { 
  /*стрелка слева*/ 
   
  width: 22px; 
  height: 42px; 
  /*border-top: 20px solid transparent; 
	border-bottom: 20px solid transparent; 
    border-right: 20px solid  rgb(51, 51, 51);*/ 
   
  background: url('prenext.png') no-repeat; 
  float: left; 
  display: block; 
  position: relative; 
  left: -600px; 
  top: 170px; 
} 
#slide1:checked~#slides .inner { 
  margin-left: 0; 
} 
#slide2:checked~#slides .inner { 
  margin-left: -100%; 
} 
#slide3:checked~#slides .inner { 
  margin-left: -200%; 
} 
 
/*точки для перелистывания*/ 
#active { 
  text-align: center; 
  margin-top: 10px; 
} 
#active label { 
  width: 10px; 
  height: 10px; 
  background: #fff; 
  opacity: 0.5; 
  display: inline-block; 
  cursor: pointer; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  -o-border-radius: 50%; 
  border-radius: 50%; 
  position: relative; 
  bottom: 500px; 
  margin-left: 15px; 
  z-index: 15; 
} 
#active label:hover { 
  background: #fff; 
  opacity: 1; 
} 
#slide1:checked~#active label:nth-child(1), 
#slide2:checked~#active label:nth-child(2), 
#slide3:checked~#active label:nth-child(3) { 
  background: #fff; 
  opacity: 1; 
} 
#slides .inner { 
  transition: all 0.8s ease-in-out; 
  -webkit-transition: all 0.8s ease-in-out; 
  -moz-transition: all 0.8s ease-in-out; 
  -ms-transition: all 0.8s ease-in-out; 
  -o-transition: all 0.8s ease-in-out; 
}
<div id="slider"> 
  <input type="radio" name="slider" id="slide1" checked=""> 
  <input type="radio" name="slider" id="slide2"> 
  <input type="radio" name="slider" id="slide3"> 
 
 
  <div id="slides"> 
    <div id="overflow"> 
      <div class="inner"> 
        <div class="page-a"> 
 
          <img src="transport.jpg" /> 
          <div class="page-1"> 
            <h1>ТРАНСПОРТНЫЕ И <br>ЛОГИСТИЧЕСКИЕ<br>УСЛУГИ</h1> <span>Перевозка и доставка грузов по всей России</span></div> 
          <div class="page-2"> <a href="transport.html">ПЕРЕЙТИ В РАЗДЕЛ</a></div> 
        </div> 
        <div class="page-b"> 
          <img src="expertisa.jpg" /> 
          <div class="page-3"> 
            <h1>СТРОИТЕЛЬСТВО И <br>МОНТАЖ</h1> <span>Перевозка и доставка грузов по всей России</span></div> 
          <div class="page-4"> <a href="stroyka.html">ПЕРЕЙТИ В РАЗДЕЛ</a></div> 
        </div> 
        <div class="page-c"> 
          <img src="sltorg.jpg" /> 
          <div class="page-5"> 
            <h1>ОПТОВО-РОЗНИЧНАЯ<br>ТОРГОВЛЯ</h1> <span>Перевозка и доставка грузов по всей России</span></div> 
          <div class="page-6"> <a href="trade.html">ПЕРЕЙТИ В РАЗДЕЛ</a></div> 
        </div> 
 
      </div> 
      <!--inner--> 
    </div> 
    <!--overflow--> 
  </div> 
  <!--slides--> 
 
  <div id="controls"> 
    <label for="slide1"></label> 
    <label for="slide2"></label> 
    <label for="slide3"></label> 
 
  </div> 
 
  <div id="active"> 
    <label for="slide1"></label> 
    <label for="slide2"></label> 
    <label for="slide3"></label> 
 
  </div>

READ ALSO
Расположение элементов в один ряд [закрыт]

Расположение элементов в один ряд [закрыт]

Есть страница на которой нужно расположить несколько элементов в рядИ у меня получилось но почему то в 2 разных случаях понадобилось делать...

121
disabled у кнопки при нажатии на чекбокс

disabled у кнопки при нажатии на чекбокс

Сделал, чтобы при нажатии на чекбокс disabled у кнопки убиралось, но как сделать, чтобы оно появлялось при повторном нажатии на чекбокс?

128