Как создать карусель с боковой панелью в html? - PullRequest
Новая
       0

Как создать карусель с боковой панелью в html?

0 голосов
/ 29 мая 2018

Я делаю сайт по баскетболу для своего спортивного клуба.Я пытаюсь сделать фото-карусель с разделом информации рядом с ней.Это следующий код, который я сделал, но я не знаю, как его стилизовать (с помощью CSS), чтобы он выглядел так, как предполагалось. 

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div class="slider-area">
    <div class="main cf">
      <div class="owl-carousel eql-height owl-theme" id="sync1" style="opacity: 1; display: block; height: 369px;">
        <div class="owl-wrapper-outer">
          <div class="owl-wrapper" style="width: 7480px; left: 0px; display: block; transition: all 800ms ease; transform: translate3d(-1496px, 0px, 0px);">
            <div class="owl-item" style="width: 748px;">
              <div class="item">
                <div class="slider-caption">
                  <h3><a href="http://werribeebasketball.com/werribee-referees-add-to-the-trophy-case/" title="Werribee referees add to the trophy case">Werribee referees add to the trophy case</a></h3>
                  <p><span>Werribee Basketball’s referees have taken out three major awards at the Technical Officials Commission’s (formerly VBRA) annual awards in May.</span></p><a class="Read-more" href="http://werribeebasketball.com/werribee-referees-add-to-the-trophy-case/"
                    title="Read More">Read More</a>
                </div>
                <div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/05/1.jpg')">
                  <a href="http://werribeebasketball.com/werribee-referees-add-to-the-trophy-case/" title="Werribee referees add to the trophy case"></a>
                </div>
              </div>
            </div>
            <div class="owl-item" style="width: 748px;">
              <div class="item">
                <div class="slider-caption">
                  <h3><a href="http://werribeebasketball.com/frankys-a1-car-sales-our-new-sponsor/" title="Franky’s A1 Car Sales our new sponsor">Franky’s A1 Car Sales our new sponsor</a></h3>
                  <p>Werribee Basketball is pleased to announced our latest sponsor to sign on in support of the club, Franky’s A1 Car Sales.</p><a class="Read-more" href="http://werribeebasketball.com/frankys-a1-car-sales-our-new-sponsor/" title="Read More">Read More</a>
                </div>
                <div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/05/frankys-digital-2.jpg')">
                  <a href="http://werribeebasketball.com/frankys-a1-car-sales-our-new-sponsor/" title="Franky’s A1 Car Sales our new sponsor"></a>
                </div>
              </div>
            </div>
            <div class="owl-item" style="width: 748px;">
              <div class="item">
                <div class="slider-caption">
                  <h3><a href="http://werribeebasketball.com/werribee-basketballs-gala-dinner-in-july/" title="Werribee Basketball’s Gala Dinner in July">Werribee Basketball’s Gala Dinner in July</a></h3>
                  <p>You’re invited to Werribee Basketball’s night of nights!</p><a class="Read-more" href="http://werribeebasketball.com/werribee-basketballs-gala-dinner-in-july/" title="Read More">Read More</a>
                </div>
                <div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/05/Gala-Dinner_WEB.jpg')">
                  <a href="http://werribeebasketball.com/werribee-basketballs-gala-dinner-in-july/" title="Werribee Basketball’s Gala Dinner in July"></a>
                </div>
              </div>
            </div>
            <div class="owl-item" style="width: 748px;">
              <div class="item">
                <div class="slider-caption">
                  <h3><a href="http://werribeebasketball.com/potter-has-the-magic-touch/" title="Potter has the magic touch">Potter has the magic touch</a></h3>
                  <p><span>You may notice Werribee Basketball’s Player and Coach Development Manager Reece Potter walking around Eagle Stadium with a big smile on his face this week – and it’s with good reason!</span></p><a class="Read-more" href="http://werribeebasketball.com/potter-has-the-magic-touch/"
                    title="Read More">Read More</a>
                </div>
                <div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/05/Web.jpg')">
                  <a href="http://werribeebasketball.com/potter-has-the-magic-touch/" title="Potter has the magic touch"></a>
                </div>
              </div>
            </div>
            <div class="owl-item" style="width: 748px;">
              <div class="item">
                <div class="slider-caption">
                  <h3><a href="http://werribeebasketball.com/court-announcer-wanted/" title="Court announcer wanted!">Court announcer wanted!</a></h3>
                  <p>Werribee Basketball is looking for a court announcer for our Big V home games at Eagle Stadium.</p><a class="Read-more" href="http://werribeebasketball.com/court-announcer-wanted/" title="Read More">Read More</a>
                </div>
                <div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/04/Court-announcer.jpg')">
                  <a href="http://werribeebasketball.com/court-announcer-wanted/" title="Court announcer wanted!"></a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="owl-controls">
          <div class="owl-buttons">
            <div class="owl-prev">
              <i class="fa fa-chevron-left"></i>
            </div>
            <div class="owl-next">
              <i class="fa fa-chevron-right"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="owl-carousel eql-height owl-theme" id="sync2" style="opacity: 1; display: block; height: 369px;">
        <div class="owl-wrapper-outer">
          <div class="owl-wrapper" style="width: 2490px; left: 0px; display: block; transition: all 800ms ease; transform: translate3d(-498px, 0px, 0px);">
            <div class="owl-item" style="width: 249px;">
              <div class="item">
                <a href="http://werribeebasketball.com/werribee-referees-add-to-the-trophy-case/" title="Werribee referees add to the trophy case">Werribee referees add to th...</a>
              </div>
            </div>
            <div class="owl-item" style="width: 249px;">
              <div class="item">
                <a href="http://werribeebasketball.com/frankys-a1-car-sales-our-new-sponsor/" title="Franky’s A1 Car Sales our new sponsor">Franky’s A1 Car Sales...</a>
              </div>
            </div>
            <div class="owl-item synced" style="width: 249px;">
              <div class="item">
                <a href="http://werribeebasketball.com/werribee-basketballs-gala-dinner-in-july/" title="Werribee Basketball’s Gala Dinner in July">Werribee Basketball’s...</a>
              </div>
            </div>
            <div class="owl-item" style="width: 249px;">
              <div class="item">
                <a href="http://werribeebasketball.com/potter-has-the-magic-touch/" title="Potter has the magic touch">Potter has the magic touch</a>
              </div>
            </div>
            <div class="owl-item" style="width: 249px;">
              <div class="item">
                <a href="http://werribeebasketball.com/court-announcer-wanted/" title="Court announcer wanted!">Court announcer wanted!</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Это то, на что это должно быть похоже, или приближение того, как оно должно выглядеть.

Image on the left, headline on the right

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

Вот код для этого: 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Carousel Example</h2>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img src="https://blog.keycdn.com/blog/wp-content/uploads/2015/10/jpg-to-webp-1.jpg" alt="Los Angeles" style="width:100%;">
        <div class="carousel-caption">
          <h3>Los Angeles</h3>
          <p>LA is always so much fun!</p>
        </div>
      </div>

      <div class="item">
        <img src="https://www.enterprise.ca/content/dam/ecom/general/Homepage/inspiration-banff-ca.jpg.wrend.1280.720.jpg" alt="Chicago" style="width:100%;">
        <div class="carousel-caption">
          <h3>Chicago</h3>
          <p>Thank you, Chicago!</p>
        </div>
      </div>
    
      <div class="item">
        <img src="http://www.personal.psu.edu/ivs5030/plant.jpg" alt="New York" style="width:100%;">
        <div class="carousel-caption">
          <h3>New York</h3>
          <p>We love the Big Apple!</p>
        </div>
      </div>
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>
0 голосов
/ 29 мая 2018

Используйте загрузочную карусель для вашего сайта по баскетболу

Нажмите здесь

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

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

...