色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

幻燈片圖像在過渡前消失

CSS

我有一個(gè)有4個(gè)圖像的圖像滑塊。在它們之間導(dǎo)航有兩種方式:滑塊角上的兩個(gè)按鈕和一個(gè)小滑塊指示器，用于選擇滑塊底部以圓點(diǎn)表示的圖像。

每個(gè)滑塊都有一個(gè)0.6s的過渡屬性，如下所示:

.carousel-inner > .item {
    background-size: cover;
    background-repeat: no-repeat;
    height: 470px;
    position: relative;
    display: none;
    -webkit-transition: .6s ease-in-out left;
    transition: .6s ease-in-out left;
}

我想做的是在這些圖像之間平滑地導(dǎo)航，具有過渡效果，因此，如果我選擇位于所選圖像之后的圖像，兩個(gè)圖像都將向左移動(dòng)，如果圖像在所選圖像之前，兩個(gè)圖像都將向右移動(dòng)。

我所尋求的效果正是這樣的。

let slideIndex = 1;

console.log("fdsf");

function showSlide(n) {
    let slides = document.querySelectorAll(".carousel-inner > .item");
    let dots = document.querySelectorAll(".carousel-indicators li");
    dots[slideIndex - 1].classList.remove("active");

    if (n > slides.length) {
        slideIndex = 1;
    } else if (n < 1) {
        slideIndex = slides.length;
    } else {
        slideIndex = n;
    }

    const activeSlide = document.querySelector(".carousel-inner > .item.active");

    activeSlide.classList.add("left");
    activeSlide.classList.remove("active");

    slides[slideIndex - 1].style.left = "100%";

    slides[slideIndex - 1].classList.add("active");
    slides[slideIndex - 1].classList.add("left");

    slides[slideIndex - 1].classList.add("next");
    slides[slideIndex - 1].classList.add("left");

    activeSlide.classList.remove("active");
    activeSlide.classList.remove("left");

    slides[slideIndex - 1].classList.remove("next");
    slides[slideIndex - 1].classList.add("active");
    slides[slideIndex - 1].classList.remove("left");

    dots[slideIndex - 1].classList.add("active");
}


$(".carousel-indicators li").on("click", function () {
    showSlide(parseInt(this.getAttribute("data-slide-to")) + 1)
})

.carousel {
    position: relative;
}

@media screen and (min-width: 768px) {
    .carousel-indicators {
        bottom: 20px;
    }
}

.carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 15;
    width: 60%;
    padding-left: 0;
    margin-left: -30%;
    text-align: center;
    list-style: none;
}

ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
}

.carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #000 \9;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #fff;
    border-radius: 10px;
}

.carousel-indicators .active {
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: #fff;
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-inner > .item.slide1 {
    background-position: center 10%;
}

.carousel-inner > .item {
    background-size: cover;
    background-repeat: no-repeat;
    height: 470px;
    position: relative;
    display: none;
    -webkit-transition: .6s ease-in-out left;
    transition: .6s ease-in-out left;
}

.carousel-inner > .next, .carousel-inner > .prev {
    position: absolute;
    top: 0;
    width: 100%
}

.carousel-inner > .next {
    left: 100%
}

.carousel-inner > .prev {
    left: -100%
}

.carousel-inner > .next.left, .carousel-inner > .prev.right {
    left: 0
}

.carousel-inner > .active.left {
    left: -100%
}

.carousel-inner > .active.right {
    left: 100%
}

.carousel-inner > .active {
    left: 0;
}

.carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev {
    display: block;
}

.carousel-control.left {
    background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
    background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}

.carousel-control.right {
    right: 0;
    left: auto;
    background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
    background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}

.carousel-control {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    opacity: .5;
    filter: alpha(opacity=50);
}

.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left {
    left: 50%;
}

.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
}

.glyphicon-chevron-left::before {
    content: url(../images/icons/left-arrow.png);
    border-radius: 50%;
    border: 1px solid white;
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right {
    right: 50%;
}

.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
}

.glyphicon:empty {
    width: 1em;
}

.glyphicon-chevron-right::before {
    content: url(../images/icons/right-arrow.png);
    border-radius: 50%;
    border: 1px solid white;
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1" class=""></li>
        <li data-target="#myCarousel" data-slide-to="2" class=""></li>
        <li data-target="#myCarousel" data-slide-to="3" class=""></li>
      </ol>

      <div class="carousel-inner">
        <div
          class="item slide1 active"
          style="
            background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
            background-size: cover;
            background-repeat: no-repeat;
          "
        >
          <div id="page-header-tagline" class="tagline1"></div>
        </div>

        <div
          class="item slide2"
          style="
            background-image: url(https://static.toiimg.com/thumb/msid-67586673,width-1070,height-580,imgsize-3918697,resizemode-6,overlay-toi_sw,pt-32,y_pad-40/photo.jpg);
            background-size: cover;
            background-repeat: no-repeat;
          "
        >
          <div id="page-header-tagline" class="tagline2"></div>
        </div>

        <div
          class="item slide3"
          style="
            background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
            background-size: cover;
            background-repeat: no-repeat;
          "
        >
          <div id="page-header-tagline" class="tagline3"></div>
        </div>

        <div
          class="item slide4"
          style="
            background-image: url(https://static.toiimg.com/thumb/msid-67586673,width-1070,height-580,imgsize-3918697,resizemode-6,overlay-toi_sw,pt-32,y_pad-40/photo.jpg);
            background-size: cover;
            background-repeat: no-repeat;
          "
        >
          <div id="page-header-tagline" class="tagline4"></div>
        </div>
      </div>

      <a class="carousel-control left" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>

      <a class="carousel-control right" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>
  </body>
</html>

請(qǐng)使用requestAnimationFrame，而不要使用setTimeout。更確切地說，是一個(gè)雙請(qǐng)求動(dòng)畫幀，它使我們能夠等待瀏覽器繪制下一幀，并在此之后做一些事情。這樣你就不用猜時(shí)間了，等到display: block已經(jīng)被瀏覽器畫好。

第二次超時(shí)也是一樣，但是你想在轉(zhuǎn)換完成后做些什么。通過偵聽transitionend事件，可以更準(zhǔn)確地實(shí)現(xiàn)這一點(diǎn)。為了確保每次幻燈片更改時(shí)該事件只被偵聽一次，請(qǐng)將{ once: true }作為選項(xiàng)參數(shù)添加到addEventListener。

我冒昧地給滑塊添加了一個(gè)isAnimating標(biāo)志來表示滑塊正在移動(dòng)，在動(dòng)畫完成之前不會(huì)發(fā)生任何事情。

let slideIndex = 1;
let isAnimating = false;

function afterNextRepaint(callback) {
  if (typeof callback !== 'function') {
    return;
  }

  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      callback();
    });
  });
}

function showSlide(n) {
  if (isAnimating || slideIndex === n) {
    return;
  }

  let slides = document.querySelectorAll(".carousel-inner > .item");
  let dots = document.querySelectorAll(".carousel-indicators li");
  dots[slideIndex - 1].classList.remove("active");

  if (n > slides.length) {
    slideIndex = 1;
  } else if (n < 1) {
    slideIndex = slides.length;
  } else {
    slideIndex = n;
  }

  isAnimating = true;

  const activeSlide = document.querySelector(".carousel-inner > .item.active");
  const nextSlide = slides[slideIndex - 1];
  const nextDot = dots[slideIndex - 1];

  nextSlide.classList.add("next");

  afterNextRepaint(() => {
    activeSlide.classList.add("left");
    nextSlide.classList.add("left");
  });

  nextSlide.addEventListener('transitionend', () => {
    nextSlide.classList.add("active");

    activeSlide.classList.remove("left");
    activeSlide.classList.remove("active");

    nextSlide.classList.remove("next");
    nextSlide.classList.remove("left");

    nextDot.classList.add("active");

    isAnimating = false;
  }, { once: true });
}


$(".carousel-indicators li").on("click", function() {
  showSlide(parseInt(this.getAttribute("data-slide-to")) + 1)
})

.carousel {
  position: relative;
}

@media screen and (min-width: 768px) {
  .carousel-indicators {
    bottom: 20px;
  }
}

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  padding-left: 0;
  margin-left: -30%;
  text-align: center;
  list-style: none;
}

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}

.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #fff;
  border-radius: 10px;
}

.carousel-indicators .active {
  width: 12px;
  height: 12px;
  margin: 0;
  background-color: #fff;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner>.item.slide1 {
  background-position: center 10%;
}

.carousel-inner>.item {
  background-size: cover;
  background-repeat: no-repeat;
  height: 470px;
  position: relative;
  display: none;
  -webkit-transition: .6s ease-in-out left;
  transition: .6s ease-in-out left;
}

.carousel-inner>.next,
.carousel-inner>.prev {
  position: absolute;
  top: 0;
  width: 100%
}

.carousel-inner>.next {
  left: 100%
}

.carousel-inner>.prev {
  left: -100%
}

.carousel-inner>.next.left,
.carousel-inner>.prev.right {
  left: 0
}

.carousel-inner>.active.left {
  left: -100%
}

.carousel-inner>.active.right {
  left: 100%
}

.carousel-inner>.active {
  left: 0;
}

.carousel-inner>.active,
.carousel-inner>.next,
.carousel-inner>.prev {
  display: block;
}

.carousel-control.left {
  background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}

.carousel-control.right {
  right: 0;
  left: auto;
  background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}

.carousel-control {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15%;
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  opacity: .5;
  filter: alpha(opacity=50);
}

.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
  left: 50%;
}

.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
}

.glyphicon-chevron-left::before {
  content: url(../images/icons/left-arrow.png);
  border-radius: 50%;
  border: 1px solid white;
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
  right: 50%;
}

.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
}

.glyphicon:empty {
  width: 1em;
}

.glyphicon-chevron-right::before {
  content: url(../images/icons/right-arrow.png);
  border-radius: 50%;
  border: 1px solid white;
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
  <title>Document</title>
</head>

<body>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1" class=""></li>
      <li data-target="#myCarousel" data-slide-to="2" class=""></li>
      <li data-target="#myCarousel" data-slide-to="3" class=""></li>
    </ol>

    <div class="carousel-inner">
      <div class="item slide1 active" style="
            background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
            background-size: cover;
            background-repeat: no-repeat;
          ">
        <div id="page-header-tagline" class="tagline1"></div>
      </div>

      <div class="item slide2" style="
            background-image: url(https://static.toiimg.com/thumb/msid-67586673,width-1070,height-580,imgsize-3918697,resizemode-6,overlay-toi_sw,pt-32,y_pad-40/photo.jpg);
            background-size: cover;
            background-repeat: no-repeat;
          ">
        <div id="page-header-tagline" class="tagline2"></div>
      </div>

      <div class="item slide3" style="
            background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
            background-size: cover;
            background-repeat: no-repeat;
          ">
        <div id="page-header-tagline" class="tagline3"></div>
      </div>

      <div class="item slide4" style="
            background-image: url(https://static.toiimg.com/thumb/msid-67586673,width-1070,height-580,imgsize-3918697,resizemode-6,overlay-toi_sw,pt-32,y_pad-40/photo.jpg);
            background-size: cover;
            background-repeat: no-repeat;
          ">
        <div id="page-header-tagline" class="tagline4"></div>
      </div>
    </div>

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>

    <a class="carousel-control right" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>

</body>

</html>

我通過更新函數(shù)showSlide解決了這個(gè)問題，通過改變?cè)诟淖兓脽羝瑫r(shí)類的名稱被刪除和添加到過渡元素的順序和方式，我還使用了settimeout函數(shù)，因?yàn)椴僮鞅仨毞殖蓭讉€(gè)步驟:

將類添加到我們想要顯示的元素旁邊，更新它的顯示，并將其呈現(xiàn)到dom中。 第一次超時(shí)負(fù)責(zé)為兩個(gè)元素添加剩余的類。該類負(fù)責(zé)將兩個(gè)圖像(舊的和新的)向左移動(dòng)100%(該移動(dòng)不會(huì)立即發(fā)生，因?yàn)榫哂邢乱粋€(gè)和左邊的類的元素的左邊為0) 第二個(gè)超時(shí)將負(fù)責(zé)最終更新，它將通過添加和刪除它們的最終類來更新這兩個(gè)元素。 現(xiàn)在看起來是這樣的:

let slideIndex = 1;

function showSlide(n) {
    let slides = document.querySelectorAll(".carousel-inner > .item");
    let dots = document.querySelectorAll(".carousel-indicators li");
    dots[slideIndex - 1].classList.remove("active");

    if (n > slides.length) {
        slideIndex = 1;
    } else if (n < 1) {
        slideIndex = slides.length;
    } else {
        slideIndex = n;
    }

    const activeSlide = document.querySelector(".carousel-inner > .item.active");
    slides[slideIndex - 1].classList.add("next");

    setTimeout(() => {
        activeSlide.classList.add("left");
        slides[slideIndex - 1].classList.add("left");

        setTimeout(() => {
            slides[slideIndex - 1].classList.add("active");

            activeSlide.classList.remove("left");
            activeSlide.classList.remove("active");

            slides[slideIndex - 1].classList.remove("next");
            slides[slideIndex - 1].classList.remove("left");

            dots[slideIndex - 1].classList.add("active");
        }, 800)
    }, 200)
}


$(".carousel-indicators li").on("click", function () {
    showSlide(parseInt(this.getAttribute("data-slide-to")) + 1)
})

.carousel {
    position: relative;
}

@media screen and (min-width: 768px) {
    .carousel-indicators {
        bottom: 20px;
    }
}

.carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 15;
    width: 60%;
    padding-left: 0;
    margin-left: -30%;
    text-align: center;
    list-style: none;
}

ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
}

.carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #000 \9;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #fff;
    border-radius: 10px;
}

.carousel-indicators .active {
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: #fff;
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-inner > .item.slide1 {
    background-position: center 10%;
}

.carousel-inner > .item {
    background-size: cover;
    background-repeat: no-repeat;
    height: 470px;
    position: relative;
    display: none;
    -webkit-transition: .6s ease-in-out left;
    transition: .6s ease-in-out left;
}

.carousel-inner > .next, .carousel-inner > .prev {
    position: absolute;
    top: 0;
    width: 100%
}

.carousel-inner > .next {
    left: 100%
}

.carousel-inner > .prev {
    left: -100%
}

.carousel-inner > .next.left, .carousel-inner > .prev.right {
    left: 0
}

.carousel-inner > .active.left {
    left: -100%
}

.carousel-inner > .active.right {
    left: 100%
}

.carousel-inner > .active {
    left: 0;
}

.carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev {
    display: block;
}

.carousel-control.left {
    background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
    background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}

.carousel-control.right {
    right: 0;
    left: auto;
    background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
    background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}

.carousel-control {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    opacity: .5;
    filter: alpha(opacity=50);
}

.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left {
    left: 50%;
}

.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
}

.glyphicon-chevron-left::before {
    content: url(../images/icons/left-arrow.png);
    border-radius: 50%;
    border: 1px solid white;
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right {
    right: 50%;
}

.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
}

.glyphicon:empty {
    width: 1em;
}

.glyphicon-chevron-right::before {
    content: url(../images/icons/right-arrow.png);
    border-radius: 50%;
    border: 1px solid white;
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1" class=""></li>
        <li data-target="#myCarousel" data-slide-to="2" class=""></li>
        <li data-target="#myCarousel" data-slide-to="3" class=""></li>
      </ol>

      <div class="carousel-inner">
        <div
          class="item slide1 active"
          style="
            background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
            background-size: cover;
            background-repeat: no-repeat;
          "
        >
          <div id="page-header-tagline" class="tagline1"></div>
        </div>

        <div
          class="item slide2"
          style="
            background-image: url(https://static.toiimg.com/thumb/msid-67586673,width-1070,height-580,imgsize-3918697,resizemode-6,overlay-toi_sw,pt-32,y_pad-40/photo.jpg);
            background-size: cover;
            background-repeat: no-repeat;
          "
        >
          <div id="page-header-tagline" class="tagline2"></div>
        </div>

        <div
          class="item slide3"
          style="
            background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
            background-size: cover;
            background-repeat: no-repeat;
          "
        >
          <div id="page-header-tagline" class="tagline3"></div>
        </div>

        <div
          class="item slide4"
          style="
            background-image: url(https://static.toiimg.com/thumb/msid-67586673,width-1070,height-580,imgsize-3918697,resizemode-6,overlay-toi_sw,pt-32,y_pad-40/photo.jpg);
            background-size: cover;
            background-repeat: no-repeat;
          "
        >
          <div id="page-header-tagline" class="tagline4"></div>
        </div>
      </div>

      <a class="carousel-control left" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>

      <a class="carousel-control right" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>

  </body>
</html>