Как сделать слайды на страницах, используя HTML и CSS - PullRequest
Новая
       0

Как сделать слайды на страницах, используя HTML и CSS

0 голосов
/ 06 июня 2018

В приведенном ниже html я хочу ввести слайдеры, но я не могу этого сделать. Я хочу сдвинуть слайд-1 влево, чтобы слайд-2 был виден.Как этого добиться?

Ниже приведен пример изображения: Здесь, на рисунке для получения информации о стрелках, мне нужны только эти 3 круга.

enter image description here

<!DOCTYPE html>
<html>

<head>
<style>

.slide-1{
   font-family: "Quicksand";
}

.slide-2{
   font-family: "Quicksand";
}

</style>

</head>

<body>

<div>

<div class="slide-1">
  <p text-wrap>This is the slide 1 content</p>
</div>

<div class="slide-2">
<p text-wrap>This is slide 2 content.And this will only be visible when user touch and side to the left of slide-1.How is this possible?</p></div>

</div>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 06 июня 2018

Bootstrap:

https://getbootstrap.com/

Создавайте адаптивные проекты для мобильных устройств в Интернете с помощью самой популярной в мире библиотеки интерфейсных компонентов.

Bootstrap - это набор инструментов с открытым исходным кодом для разработки с использованием HTML, CSS и JS.Быстро создавайте прототипы своих идей или создавайте все свое приложение с нашими переменными и миксинами Sass, адаптивной сеточной системой, обширными встроенными компонентами и мощными плагинами, созданными на основе jQuery.

Имеет приятный компонент под названием Carousel .https://getbootstrap.com/docs/4.1/components/carousel/
Вот пример:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="https://content.nike.com/content/dam/one-nike/en_lu/SU16/Running/Free-xcat/Desktop/SU16_RN_NikeFree_InnovationHub_M_CDP_P1.jpg.transform/full-screen/SU16_RN_NikeFree_InnovationHub_M_CDP_P1.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://www.pandasecurity.com/spain/mediacenter/src/uploads/2014/08/free.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://blog.bufferapp.com/wp-content/uploads/2014/05/6110974997_8b0dfa13a0_b.jpg" alt="Third slide">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
0 голосов
/ 06 июня 2018

Возьмите этот пример, он содержит лиги сценария, которые вы можете использовать для управления ритмом перехода, и вы можете играть со стилем 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style>
* {
    margin: 0;
    padding: 0;
}
.main {

    width:50%;

    max-width: 1000px;
    margin:40px auto;
}
.slides {
    width:100%;
}

.slides img {
    width:70%;
    height:100%

}

.slidesjs-pagination {

    list-style:none;
    overflow:hidden;

}

.slidesjs-pagination li {
    float:left;
}

.slidesjs-pagination li a {
    border-radius: 100px;
    display:block;
    padding:10px 20px;
    color:rgba(220,220,220,0);
    text-decoration:none;
    background-color: rgba(220,220,220,0.6);

}

.slidesjs-pagination li a:hover {
    background:#000;
}

.slides .active {
    background-color: rgba(180,180,180,0.6);
    color: rgba(180,180,180,0);
}

.slidesjs-navigation{
    background-color: rgba(220,220,220,0.6);
    color:#000;
    text-decoration:none;
    display:inline-block;
    padding:13.6px 20px;
    float:right;
}

</style>
<body>

    <div class="main">
        <div class="slides">
            <img src="http://www.seguridad-maestro.tk/slideshow/1.jpg" alt="">
            <img src="http://www.seguridad-maestro.tk/slideshow/2.jpg" alt="">
            <img src="http://www.seguridad-maestro.tk/slideshow/3.jpg" alt="">
            <img src="http://www.seguridad-maestro.tk/slideshow/4.jpg" alt="">
        </div>
    </div>

    <script src="http://www.seguridad-maestro.tk/jquery-1.9.1.min.js"></script>
    <script src="http://www.seguridad-maestro.tk/slideshow.js"></script>
    <script src="http://www.seguridad-maestro.tk/js/jquery.slides.js"></script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...