Показать сообщение отдельно
  #4 (permalink)  
Старый 04.01.2018, 14:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

FirstFrost,
ниже это макет... нужен примерно такой же минимальный,но с вашей проблемой

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css">
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.green.css" />
  <style type="text/css">
    .owl-carousel .item {
    height: 10rem;
    background-color: #4DC7A0;
    padding: 1rem;
    position:relative;

}
.owl-carousel .owl-prev{
   position:absolute;
   top:0; left:0;
   display:block;
   height:99%;
   width:90px;
  background-color: #FF00FF;
}
.owl-carousel .owl-next{
   position:absolute;
   top:0; right:0;
   display:block;
   height:99%;
   width:90px;
    background-color: #FF00FF;
}


.prev:after, .next:after{
  content: attr(class);
}

.prev,.next{
  display: inline-block;
}

  </style>

  <title>Owl Carousel 2.1.0 Responsive by Geyan</title>
<script>

$(function() {
    $(".owl-carousel").owlCarousel({ slideBy:5, loop : true, startPosition: -1,
        items: 6,
        nav: true,
        navText: ['<img src="/left.png" alt="" />', '<img src="/right.png" alt="" />'],
        dots: false
    })
});

</script>


</head>

<body>
  <div class="owl-carousel">
    <div class="item">
        <h4>1</h4>
    </div>
    <div class="item">
        <h4>2</h4>
    </div>
    <div class="item">
        <h4>3</h4>
    </div>
    <div class="item">
        <h4>4</h4>
    </div>
    <div class="item">
        <h4>5</h4>
    </div>
    <div class="item">
        <h4>6</h4>
    </div>
    <div class="item">
        <h4>7</h4>
    </div>
    <div class="item">
        <h4>8</h4>
    </div>
    <div class="item">
        <h4>9</h4>
    </div>
    <div class="item">
        <h4>10</h4>
    </div>
    <div class="item">
        <h4>11</h4>
    </div>
    <div class="item">
        <h4>12</h4>
    </div>
</div>

</body>

</html>

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием