Часть текста должна изменяться в Карусели с использованием чистых html css нет JavaScript или jQuery - PullRequest
Новая
       49

Часть текста должна изменяться в Карусели с использованием чистых html css нет JavaScript или jQuery

1 голос
/ 20 февраля 2020

У меня есть Карусель, где часть текста должна меняться с фиксированным интервалом. необходимо изменить текст с WEB на мобильные продукты для разработки приложений IoT и т. д. Я использую aurelia framework

https://www.codeply.com/p/7k0uDOyaf3

$('#carouselExampleSlidesOnly').carousel({
  interval: 500
})
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active"><img class="d-block w-100" src="https://worldtransfer.online/wp-content/uploads/2016/09/worldmap-bg.jpg" alt="First slide">
      <div class="carousel-caption big clearfix p-5" style="width:fit-content">
        <div class="d-flex">
          <h1 class="text-uppercase text-white">We Architect,</h1>
          <h3 class="pt-2 pl-2">Design and Develop</h3>
        </div>
        <h1 class="text-uppercase"><span class="text-warning pr-3">Web</span>Application</h1>
      </div>
      <div class="carousel-caption d-none d-md-block"><img class="d-block w-75 image-left" src="https://cdn2.hubspot.net/hub/145335/file-407477601-gif/blog-files/the-importance-of-mobile-responsive-web-design.gif" alt="system Image"></div>
    </div>
  </div>
</div>

1 Ответ

2 голосов
/ 20 февраля 2020

Переместите скрипт jQuery в начало всех скриптов, проверьте фрагмент 

var $ = jQuery;
$('#carouselExampleSlidesOnly').carousel({
  interval: 2000
})
.carousel-inner {
  background-image: url("https://worldtransfer.online/wp-content/uploads/2016/09/worldmap-bg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 250px
}

.carousel-caption {
  top: 1em;
}

.carousel {
  position: relative
}

.d_flex {
  position: absolute;
  z-index: 99;
  justify-content: center;
  top: 10%;
  text-align: center;
  align-items: center;
  width: 100%;
}

.carousel-text {
  position: absolute;
  z-index: 99;
  height:100%;
  top:100%
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="d_flex d-flex">
    <h2 class="text-uppercase text-white">We Architect,</h2>
    <h3 class="text-white">Design and Develop</h3>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="carousel-caption" >
        <div class="carousel-text">
          <h1 class="text-uppercase">
            <span class="text-warning pr-3">Web</span>Application
          </h1>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="carousel-caption">
        <div class="carousel-text">
          <h1 class="text-uppercase">
            <span class="text-warning pr-3">Mobile</span>Application
          </h1>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="carousel-caption" >
        <div class="carousel-text">
          <h1 class="text-uppercase">
            <span class="text-warning pr-3">Desktop</span>Application
          </h1>
        </div>
      </div>
    </div>
  </div>


</div>
...