All geek questions in one place

CSS: Make Children Inside Parents

This way, I don't use any CSS structure like bootstrap to get responsiveness out of the box, so I am having problems with layout response.

See jsbin

I am essentially that for automatically resizing colorful boxes based on the size of the browser window, for example, which should shrink or grow automatically depending on the size of the window. The color boxes inside the parent should always be in a horizontal row, but should be able to adjust their width and height as this example .

I tried using flex-wrap: nowrap;, but that did not help :(

Please note that in bright boxes it is used position:absolutewith the parental position relative. I also add the leftcss property to these fields via JavaScript to change their position for the moving animation.

function Carousel(options) {
  options = options || {};

  // options vars
  let speed = options.speed || 1; // animation speed in seconds
  let width = options.width || 200;
  let height = options.height || 100;
  let space = options.space || 30;

  // other vars
  let container = document.querySelector('.carousel-container .carousel');
  let slides = container.querySelectorAll('.carousel-item');
  let curSlide = null;
  let prevSlide = null;
  let nextSlide = null;

  if (areSlidesPresent()) {
    setup();
  }

  // functions //

  function setup() {
    // we assume first slide to be current one as per UI requirements
    //slides[0].classList.add("current");
    curSlide = slides[0];

    // we assume second slide to be next as per UI requirements
    nextSlide = slides[1];

    // we assume last slide to be prev as per UI requirements
    prevSlide = slides[slides.length - 1];

    // position elements horizontally        
    positionSlides();
  }

  function areSlidesPresent() {
    return slides.length > 0;
  }

  this.getCurrentSlide = function() {
    return curSlide;
  }

  this.getNextSlide = function() {
    return nextSlide;
  }

  this.getPreviousSlide = function() {
    return prevSlide;
  }

  this.setNextSlide = function() {

    if (areSlidesPresent()) {
      let allSlides = [];

      // build new order of slides
      allSlides.push(nextSlide);

      // middle ones
      for (let i = 2; i < slides.length; i++) {
        allSlides.push(slides[i]);
      }

      allSlides.push(curSlide);

      // now add to DOM after cleaning previous slide order
      for (let i = 0; i < allSlides.length; i++) {
        container.appendChild(allSlides[i]);
      }

      slides = allSlides;

      setup();
    }
  }

  this.setPreviousSlide = function() {
    if (areSlidesPresent()) {
      let allSlides = [];

      // build new order of slides
      allSlides.push(prevSlide);
      allSlides.push(curSlide);

      // middle ones
      for (let i = 1; i < slides.length - 1; i++) {
        allSlides.push(slides[i]);
      }

      // now add to DOM after cleaning previous slide order
      for (let i = 0; i < allSlides.length; i++) {
        container.appendChild(allSlides[i]);
      }

      slides = allSlides;

      setup();
    }
  }

  function positionSlides() {

    curSlide.style.marginLeft = '0px';

    for (let i = 0; i < slides.length; i++) {

      slides[i].querySelector('.carousel-content').style.width = (width) + 'px';
      slides[i].querySelector('.carousel-content').style.height = (height) + 'px';

      let elementWidth = getStyle(nextSlide, 'width');

      if (i === 0) {
        slides[i].style.zIndex = -10;
        //slides[i].style.opacity = '1';

        slides[i].querySelector('.carousel-content').style.width = (width + 50) + 'px';
        slides[i].querySelector('.carousel-content').style.height = (height + 50) + 'px';
      } else {
        slides[i].style.zIndex = 0;
        //slides[i].style.opacity = '0.7';
      }

      if (i > 0) {
        slides[i].style.marginLeft = (space * 2) + 'px';
        elementWidth = parseInt(elementWidth, 10) + space;
      }

      slides[i].style.transition = speed + 's';
      slides[i].style.left = (elementWidth * i) + 'px';
    }
  }

  function getStyle(el, prop) {
    return window.getComputedStyle(el, null).getPropertyValue(prop)
      .replace('px', '')
      .replace('em', '');
  }
}

// utility
function log(text) {
  console.log(text);
}

var options = {
  speed: 1, // animation speed
  width: 250, // slide width
  height: 150, // slide height
  space: 25 // space in px between slides
};

var carousel = new Carousel(options);

function selectCurrent() {
  log(carousel.getCurrentSlide());
}

function selectNext() {
  carousel.setNextSlide();
}

function selectPrev() {
  carousel.setPreviousSlide();
}
.carousel-container {
  width: auto;
  height: auto;
  margin: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.carousel .carousel-item {
  position: absolute;
  transition: transform .5s ease-in-out;
  color: #fff;
  margin-left: 10px;
  -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(255, 255, 255, 0.2)));
}

.carousel .carousel-item:first-child .carousel-content {
  opacity: 1;
}

.carousel .carousel-item .carousel-title {
  font-size: 24px;
  text-align: center;
}

.carousel .carousel-item .carousel-content {
  font-size: 18px;
  font-weight: bold;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}


/* temp css below */

body {
  background: #2C374A;
  padding-top: 150px;
}

.navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 150px;
}

.button {
  color: #444;
  padding: 10px;
  width: 60px;
  cursor: pointer;
  background: #CCC;
  text-align: center;
  font-weight: bold;
  border-radius: 5px;
  border-top: 1px solid #FFF;
  box-shadow: 0 5px 0 #999;
  transition: box-shadow 0.1s, top 0.1s;
  margin: 10px;
}

.button:hover,
.button:hover {
  color: #000;
}

.button:active,
.button:active {
  top: 104px;
  box-shadow: 0 1px 0 #999;
}
<div class="carousel-container">
  <div class="carousel">

    <div class="carousel-item">
      <div class="carousel-title">Make a Call</div>
      <div class="carousel-content" style="background:#0E6DE8;border:10px solid #78B1FA">Slide One</div>
    </div>

    <div class="carousel-item">
      <div class="carousel-title">Send a Message</div>
      <div class="carousel-content" style="background:#D90080;border:10px solid #E357A9">Slide Two</div>
    </div>

    <div class="carousel-item">
      <div class="carousel-title">Send a Picture</div>
      <div class="carousel-content" style="background:#FEC601;border:10px solid #FFDD64">Slide Three</div>
    </div>

    <div class="carousel-item">
      <div class="carousel-title">Send a Video</div>
      <div class="carousel-content" style="background:#3DB365;border:10px solid #90E0AB">Slide Four</div>
    </div>

  </div>
</div>


<div class="navigation">
  <div class="button" onclick="selectNext()">Next</div>
  <div class="button" onclick="selectCurrent()">Select</div>
  <div class="button" onclick="selectPrev()">Prev</div>
</div>
Run codeHide result
+4
source share
1 answer

The problem is here:

  • The width was hardcoded in your JS, so if the width is in px, it cannot be responsive.
  • Applying position:absoluteto you carousel-item, he made the children leave the window.

What I've done:

  • Get rid of static width and other width related functions from your JS
  • Removed position:absolutefromcarousel-item

Let me know if this is what you expect.

function Carousel(options) {
  options = options || {};

  // options vars
  let speed = options.speed || 1; // animation speed in seconds
  // let width = options.width || 100;
  let height = options.height || 100;
  let space = options.space || 30;

  // other vars
  let container = document.querySelector('.carousel-container .carousel');
  let slides = container.querySelectorAll('.carousel-item');
  let curSlide = null;
  let prevSlide = null;
  let nextSlide = null;

  if (areSlidesPresent()) {
    setup();
  }

  // functions //

  function setup() {
    // we assume first slide to be current one as per UI requirements
    //slides[0].classList.add("current");
    curSlide = slides[0];

    // we assume second slide to be next as per UI requirements
    nextSlide = slides[1];

    // we assume last slide to be prev as per UI requirements
    prevSlide = slides[slides.length - 1];

    // position elements horizontally        
    positionSlides();
  }

  function areSlidesPresent() {
    return slides.length > 0;
  }

  this.getCurrentSlide = function() {
    return curSlide;
  }

  this.getNextSlide = function() {
    return nextSlide;
  }

  this.getPreviousSlide = function() {
    return prevSlide;
  }

  this.setNextSlide = function() {

    if (areSlidesPresent()) {
      let allSlides = [];

      // build new order of slides
      allSlides.push(nextSlide);

      // middle ones
      for (let i = 2; i < slides.length; i++) {
        allSlides.push(slides[i]);
      }

      allSlides.push(curSlide);

      // now add to DOM after cleaning previous slide order
      for (let i = 0; i < allSlides.length; i++) {
        container.appendChild(allSlides[i]);
      }

      slides = allSlides;

      setup();
    }
  }

  this.setPreviousSlide = function() {
    if (areSlidesPresent()) {
      let allSlides = [];

      // build new order of slides
      allSlides.push(prevSlide);
      allSlides.push(curSlide);

      // middle ones
      for (let i = 1; i < slides.length - 1; i++) {
        allSlides.push(slides[i]);
      }

      // now add to DOM after cleaning previous slide order
      for (let i = 0; i < allSlides.length; i++) {
        container.appendChild(allSlides[i]);
      }

      slides = allSlides;

      setup();
    }
  }

  function positionSlides() {

    curSlide.style.marginLeft = '0px';

    for (let i = 0; i < slides.length; i++) {

      // slides[i].querySelector('.carousel-content').style.width = (width) + 'px';
      slides[i].querySelector('.carousel-content').style.height = (height) + 'px';

      let elementWidth = getStyle(nextSlide, 'width');

      if (i === 0) {
        slides[i].style.zIndex = -10;
        //slides[i].style.opacity = '1';

        // slides[i].querySelector('.carousel-content').style.width = (width + 50) + 'px';
        slides[i].querySelector('.carousel-content').style.height = (height + 50) + 'px';
      } else {
        slides[i].style.zIndex = 0;
        //slides[i].style.opacity = '0.7';
      }

      if (i > 0) {
        slides[i].style.marginLeft = (space * 2) + 'px';
        // elementWidth = parseInt(elementWidth, 10) + space;
      }

      slides[i].style.transition = speed + 's';
      // slides[i].style.left = (elementWidth * i) + 'px';
    }
  }

  function getStyle(el, prop) {
    return window.getComputedStyle(el, null).getPropertyValue(prop)
      .replace('px', '')
      .replace('em', '');
  }
}

// utility
function log(text) {
  console.log(text);
}

var options = {
  speed: 1, // animation speed
  width: 250, // slide width
  height: 150, // slide height
  space: 25 // space in px between slides
};

var carousel = new Carousel(options);

function selectCurrent() {
  log(carousel.getCurrentSlide());
}

function selectNext() {
  carousel.setNextSlide();
}

function selectPrev() {
  carousel.setPreviousSlide();
}
.carousel-container {
  height: auto;
  margin: 25px;
  display: flex;
}

.carousel {
  flex: 1;
  height: 100%;
  width: 100vh;
  /*   overflow:hidden; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel .carousel-item {
  transition: transform .5s ease-in-out;
  color: #fff;
  flex: 1;
  margin-left: 10px;
  -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(255, 255, 255, 0.2)));
}

.carousel .carousel-item:first-child .carousel-content {
  opacity: 1;
}

.carousel .carousel-item .carousel-title {
  font-size: 24px;
  text-align: center;
}

.carousel .carousel-item .carousel-content {
  font-size: 18px;
  font-weight: bold;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}


/* temp css below */

body {
  background: #2C374A;
}

.navigation {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  color: #444;
  padding: 10px;
  width: 60px;
  cursor: pointer;
  background: #CCC;
  text-align: center;
  font-weight: bold;
  border-radius: 5px;
  border-top: 1px solid #FFF;
  box-shadow: 0 5px 0 #999;
  transition: box-shadow 0.1s, top 0.1s;
  margin: 10px;
}

.button:hover,
.button:hover {
  color: #000;
}

.button:active,
.button:active {
  box-shadow: 0 1px 0 #999;
}
<div class="navigation">
  <div class="button" onclick="selectNext()">Next</div>
  <div class="button" onclick="selectCurrent()">Select</div>
  <div class="button" onclick="selectPrev()">Prev</div>
</div>

<div class="carousel-container">
  <div class="carousel">

    <div class="carousel-item">
      <div class="carousel-title">Make a Call</div>
      <div class="carousel-content" style="background:#0E6DE8;border:10px solid #78B1FA">Slide One</div>
    </div>

    <div class="carousel-item">
      <div class="carousel-title">Send a Message</div>
      <div class="carousel-content" style="background:#D90080;border:10px solid #E357A9">Slide Two</div>
    </div>

    <div class="carousel-item">
      <div class="carousel-title">Send a Picture</div>
      <div class="carousel-content" style="background:#FEC601;border:10px solid #FFDD64">Slide Three</div>
    </div>

    <div class="carousel-item">
      <div class="carousel-title">Send a Video</div>
      <div class="carousel-content" style="background:#3DB365;border:10px solid #90E0AB">Slide Four</div>
    </div>

  </div>
</div>
Run codeHide result
+4
source

Source: https://habr.com/ru/post/1695621/

More articles:


All Articles