Header Ads Widget

Responsive Advertisement

how to make a simple slider on a website?

Nano October 30, 2023

A sliding blog on a website, often referred to as a "slider" or "carousel," serves several functions and can offer various benefits, depending on how it's implemented and its purpose within the website. Here are some of the key functions and advantages of using a sliding blog on a website:


1. Showcase Featured Content: Sliding blogs are often used to highlight and showcase featured or important blog posts. This helps draw attention to specific articles, promotions, or announcements.


2. Engage Users: The sliding motion and dynamic design of a sliding blog can be visually engaging and can capture the interest of visitors. It encourages users to interact with the content and explore different blog posts.


3. Save Space: A sliding blog can be a space-saving design element. Instead of displaying all blog posts at once, you can use a slider to present a curated selection of posts in a limited space.


4. Promote Recent Posts: You can use the sliding blog to display your most recent blog posts at the top of your website. This keeps your content fresh and encourages visitors to explore your latest articles.


5. Improve Navigation: Sliding blogs often include navigation controls like arrows or dots, making it easy for users to move between blog posts. This can enhance the website's overall navigation and user experience.


6. Reduce Clutter: For websites with a significant amount of blog content, a sliding blog can help reduce clutter on the homepage or landing pages by condensing multiple posts into a single, organized element.


7. Tell a Story: When used effectively, a sliding blog can be used to tell a narrative or guide users through a sequence of related blog posts, such as a tutorial, a series of articles, or a product journey.


8. Call-to-Action (CTA):You can use sliding blog elements to incorporate call-to-action buttons within each post, encouraging users to take desired actions, such as signing up for a newsletter, purchasing a product, or sharing content on social media.


9. Aesthetics: A well-designed sliding blog can enhance the overall visual appeal of your website, making it more attractive to visitors.


10. Highlight Visual Content: If your blog posts include multimedia content like images and videos, a sliding blog can effectively showcase these visual elements.


It's important to note that the choice to implement a sliding blog should be made with a clear understanding of your website's goals and your target audience's preferences. While sliding blogs can offer many advantages, they should not compromise website performance, load times, or user experience. Proper design and optimization are essential to ensure that the sliding blog functions effectively and doesn't detract from the site's overall performance.

The following is a script that you can use :

HTML


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="blogs owl-carousel">
      <div class="blog">
        <img src="1.jpg" alt="">
        <div class="blog-description">
          <div class="categorie">Food</div>
          <h2 class="title">Lorem ipsum dolor sit amet</h2>
          <div class="date">Jan 13 2020</div>
          <a href="#" class="btn">Read More</a>
        </div>
      </div>

      <div class="blog">
        <img src="2.jpg" alt="">
        <div class="blog-description">
          <div class="categorie">Cars</div>
          <h2 class="title">Lorem ipsum dolor sit amet</h2>
          <div class="date">Jan 13 2020</div>
          <a href="#" class="btn">Read More</a>
        </div>
      </div>

      <div class="blog">
        <img src="3.jpg" alt="">
        <div class="blog-description">
          <div class="categorie">Coding</div>
          <h2 class="title">Lorem ipsum dolor sit amet</h2>
          <div class="date">Jan 13 2020</div>
          <a href="#" class="btn">Read More</a>
        </div>
      </div>

      <div class="blog">
        <img src="4.jpg" alt="">
        <div class="blog-description">
          <div class="categorie">Sports</div>
          <h2 class="title">Lorem ipsum dolor sit amet</h2>
          <div class="date">Jan 13 2020</div>
          <a href="#" class="btn">Read More</a>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      $(".owl-carousel").owlCarousel({
        items: 2,
        margin: 20,
        loop: true,
        center: true,
        dots: false
      });
    </script>
    
  </body>
</html>


CSS

*{
  margin: 0;
  padding: 0;
  font-family: "Open Sans",sans-serif;
}

.blogs{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.blog{
  overflow: hidden;
  position: relative;
  height: 100%;
  cursor: pointer;
}

.blog img{
  width: 100%;
  height: 100%;
}

.blog-description{
  position: absolute;
  bottom: -40px;
  background: #333333ca;
  width: 100%;
  padding: 40px;
  transition: .3s linear;
}

.blog:hover .blog-description{
  bottom: 0;
}

.categorie{
  display: inline-block;
  color: #e77f67;
  font-size: 18px;
  position: relative;
  padding: 0 22px;
}

.categorie::before{
  content: '';
  position: absolute;
  width: 14px;
  height: 2px;
  background: #e77f67;
  left: 0;
  top: 13px;
}

.categorie::after{
  content: '';
  position: absolute;
  width: 14px;
  height: 2px;
  background: #e77f67;
  right: 0;
  top: 13px;
}

.title{
  color: #fff;
  font-weight: 500;
  margin: 5px 0;
}

.date{
  font-style: italic;
  color: #e77f67;
  margin-bottom: 20px;
}

.btn{
  display: inline-block;
  color: #e77f67;
  text-decoration: none;
  border: 1px solid #e77f67;
  padding: 6px 20px;
  opacity: 0;
  transition: .3s linear;
}

.blog:hover .btn{
  opacity: 1;
}

.btn:hover{
  color: #fff;
  background: #e77f67;
}

.owl-stage{
  display: flex !important;
}

Tags:
Nano

Posted by: Nano

Post a Comment

0 Comments