0

Как переместить прокрутку влево, а картинку справа сделать на 100%?

* {
  margin: 0;
  padding: 0;
}

.slider {
  width: 300px;
  position: relative;
  padding-top: 0px;
  float: right;
}

.slider>label {}

.slider>img {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 700px;
  background-size: cover;
}

input[name='slide_switch'] {
  display: none;
}

.slider label {
  margin: 18px 18px 18px 18px;
  cursor: pointer;
  opacity: 0.6;
}

.slider label img {
  display: block;
}

.slider input[name='slide_switch']:checked+label {
  border-color: #666;
  opacity: 1;
}

.slider input[name='slide_switch']~img {
  opacity: 0;
  transform: scale(1.1);
}

.slider input[name='slide_switch']:checked+label+img {
  opacity: 1;
  transform: scale(1);
}

.leff {
  background-color: rgb(173, 36, 36);
  float: left;
  overflow: scroll;
}

.leff>label {
  display: block;
  margin: 18px 18px 18px 18px;
  height: 150px;
  width: 200px;
}

.leff>label>img {
  height: 150px;
  width: 200px;
}
<div class="slider">
  <input type="radio" name="slide_switch" id="id1" />
  <label for="id1">

    </label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />

  <!--Lets show the second image by default on page load-->
  <input type="radio" name="slide_switch" id="id2" checked="checked" />
  <label for="id2">

    </label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />

  <input type="radio" name="slide_switch" id="id3" />
  <label for="id3">

    </label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />

  <input type="radio" name="slide_switch" id="id4" />
  <label for="id4">

    </label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />

  <input type="radio" name="slide_switch" id="id5" />
  <label for="id5">

    </label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />

</div>
<div class="leff"><input type="radio" name="slide_switch" id="id1" />
  <label for="id1">
        <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
    </label>


  <!--Lets show the second image by default on page load-->
  <input type="radio" name="slide_switch" id="id2" checked="checked" />
  <label for="id2">
        <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
    </label>


  <input type="radio" name="slide_switch" id="id3" />
  <label for="id3">
        <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
    </label>


  <input type="radio" name="slide_switch" id="id4" />
  <label for="id4">
        <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
    </label>


  <input type="radio" name="slide_switch" id="id5" />
  <label for="id5">
        <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
    </label>

</div>

https://jsfiddle.net/trj3vuda/

1 ответ 1

0

Если под картинкой справа Вы имели ввиду изображение в блоке .slider и нужно растянуть его до блока .left, то так:

  • direction: rtl; - документация
  • width:calc(100% - 253px); - как вариант, можно обернуть блоки во flex

    .leff {
      background-color: rgb(173, 36, 36);
      float: left;
      overflow: scroll;
      direction: rtl;
    }
    .slider {
      /*width: 300px;*/
      width:calc(100% - 253px);
      position: relative;
      padding-top: 0px;
      float: right;
    }
    

* {
  margin: 0;
  padding: 0;
}

.slider {
  /*width: 300px;*/
  width:calc(100% - 253px);
  position: relative;
  padding-top: 0px;
  float: right;
}

.slider>label {}

.slider>img {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 700px;
  background-size: cover;
}

input[name='slide_switch'] {
  display: none;
}

.slider label {
  margin: 18px 18px 18px 18px;
  cursor: pointer;
  opacity: 0.6;
}

.slider label img {
  display: block;
}

.slider input[name='slide_switch']:checked+label {
  border-color: #666;
  opacity: 1;
}

.slider input[name='slide_switch']~img {
  opacity: 0;
  transform: scale(1.1);
}

.slider input[name='slide_switch']:checked+label+img {
  opacity: 1;
  transform: scale(1);
}

.leff {
  background-color: rgb(173, 36, 36);
  float: left;
  overflow: scroll;
  direction: rtl;
}

.leff>label {
  display: block;
  margin: 18px 18px 18px 18px;
  height: 150px;
  width: 200px;
}

.leff>label>img {
  height: 150px;
  width: 200px;
}
<div class="slider">
  <input type="radio" name="slide_switch" id="id1" />
  <label for="id1">

    </label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />

  <!--Lets show the second image by default on page load-->
  <input type="radio" name="slide_switch" id="id2" checked="checked" />
  <label for="id2">

    </label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />

  <input type="radio" name="slide_switch" id="id3" />
  <label for="id3">

    </label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />

  <input type="radio" name="slide_switch" id="id4" />
  <label for="id4">

    </label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />

  <input type="radio" name="slide_switch" id="id5" />
  <label for="id5">

    </label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />

</div>
<div class="leff"><input type="radio" name="slide_switch" id="id1" />
  <label for="id1">
        <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
    </label>


  <!--Lets show the second image by default on page load-->
  <input type="radio" name="slide_switch" id="id2" checked="checked" />
  <label for="id2">
        <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
    </label>


  <input type="radio" name="slide_switch" id="id3" />
  <label for="id3">
        <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
    </label>


  <input type="radio" name="slide_switch" id="id4" />
  <label for="id4">
        <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
    </label>


  <input type="radio" name="slide_switch" id="id5" />
  <label for="id5">
        <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
    </label>

</div>

8
  • Ну можно сказать одна проблема решена спс, а как скрол убрать справа и влево переместить?
    – recile
    21 ноя 2018 в 4:45
  • vfl.ru/fotos/f8c3416624290084.html
    – recile
    21 ноя 2018 в 4:49
  • @recile справа браузерная прокрутка или прокрутка на блоке slider ?
    – Alex
    21 ноя 2018 в 7:17
  • Да прокрутка на блоке slider нужно
    – recile
    21 ноя 2018 в 9:34
  • 1
    ок, не заметил, сделал
    – recile
    21 ноя 2018 в 18:21

Ваш ответ

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

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