1

I'm new to drupal and not a coder but trying to add owl-carousel in the custom block following some online guides.

I found 2 links which had good owl carousel demos and both of them had 3 sections (HTML,CSS,JS) that need to integrate to make it work.

Links:

owl carousel

Flickity carousel

I was trying the owl carousel and the method I tried was to create a custom block with Full HTML support and used the following HTML code.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link href="/en/libraries/OwlCarousel2-2.2.0/dist/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="/en/libraries/OwlCarousel2-2.2.0/dist/assets/owl.theme.default.min.css" rel="stylesheet" />
<style type="text/css">article {
  margin: 20px auto;
  width: 100%;
  padding: 1em;
  font-family: sans-serif;
  font-weight: normal;
  font-size: 1em;
  color:#FFC345;
}


.quote {
  background: #3E3831;
  padding: 15px 20px 5px 15px;
  border-radius: 5px;
  margin-bottom: 30px;
}

.quote:after {
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 18px 0 18px;
  border-color: #3E3831 transparent transparent transparent;
  position: relative;
  top: 37px;
  left: 20px;
}

.student {
  margin-left: 25px;
  margin-bottom: 80px;
}

.student .photo {
  background-color: #ccc;
  border-radius: 100px;
  width: 60px;
  height: 60px;
  float: left;
  margin-right: 10px;
}

.student p {
  position: relative;
  top: 5px;
  text-transform: uppercase;
}

.student p:nth-child(2) {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0;
}

.student p:nth-child(3) {
  font-size: 14px;
  color: #777;
}
</style>
<article>
<div id="owl">
<div class="column row">
<div class="large-12 columns testimonial">
<div class="quote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices, elit sed faucibus pharetra, diam mauris bibendum orci, sit amet ullamcorper purus dui sit amet augue. Donec aliquet diam ut neque mattis, eu tristique sem rutrum.</p>
</div>

<div class="student">
<div class="photo round-image">&nbsp;</div>

<p>Don Know</p>

<p>Important person, some Company</p>
</div>
</div>
</div>

<div class="row">
<div class="large-12 columns testimonial">
<div class="quote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices, elit sed faucibus pharetra, diam mauris bibendum orci, sit amet ullamcorper purus dui sit amet augue. Donec aliquet diam ut neque mattis, eu tristique sem rutrum.</p>
</div>

<div class="student">
<div class="photo">&nbsp;</div>

<p>Pablo Napp</p>

<p>Important person, some Company</p>
</div>
</div>
</div>
</div>
</article>
<script src="/en/libraries/jquery-1.11.3.min.js"></script><script src="/en/libraries/OwlCarousel2-2.2.0/dist/owl.carousel.min.js"></script><script>
    $(document).ready(function () {
            $("#owl").owlCarousel({
                navigation: false,
                slideSpeed: 100,
                paginationSpeed: 800,
                singleItem: true,
                autoPlay: true
            });
        });
    </script>

Sorry, the code was taken from some other sources and I've only limited knowledge on it.

Could anyone please guide me how to implement such carousel.

Thanks

  • 2
    Copying and pasting code from tutorials will not help you learn if you are brand new to this. I recommend an account with drupalize.me. – Kevin Jan 14 '17 at 17:16
1

I would not bother with copy pasting HTML/CSS/JS into a block (this is bad practice regardless).

Instead, you might want to try the Owl Carousel or Flickity module for Drupal. You didn't mention your version, Owl Carousel exists for Drupal 7, while Flickity only exists for Drupal 8.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.