How to add touchSwipe to your Bootstrap Carousel

Have you ever wanted to add touch swipe and gestures to your Bootstrap Carousel? It’s quite simple to do really…

So first things first, you will need to add the TouchSwipe jQuery Plugin to your website. This plugin will detect single and multiple finger swipes, pinches and falls back to mouse ‘drags’ on the desktop. It offers a lot more features which you can read about here.

Once you have added this, you can add the Bootstrap Carousel as follows:-


<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">

        <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>

        <div class="carousel-item active">
            <img class="first-slide" src="https://via.placeholder.com/960x500" alt="First slide">
            <div class="container">
                <div class="carousel-caption text-left">
                    <h1>Example headline.</h1>
                    <p>Cras justo odio, dapibus ac facilisis in</p>
                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <img class="second-slide" src="https://via.placeholder.com/960x500" alt="Second slide">
            <div class="container">
                <div class="carousel-caption">
                    <h1>Another example headline.</h1>
                    <p>Cras justo odio, dapibus ac facilisis in</p>
                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <a href="https://codepen.io" target="_blank" rel="noopener noreferrer"><img class="third-slide" src="https://via.placeholder.com/960x500" alt="Third slide"></a>
        </div>
    </div>
</div>

Now to implement the swipe gestures with the Bootstrap Carousel, you will need to add the below code:-


$( document ).ready(function() {

    // Carousel

    $(".carousel").carousel({
        interval: false,
        pause: true
    });

    $( ".carousel .carousel-inner" ).swipe( {
    swipeLeft: function ( event, direction, distance, duration, fingerCount ) {
        this.parent( ).carousel( 'next' );
    },
    swipeRight: function ( ) {
        this.parent( ).carousel( 'prev' );
    },
    threshold: 0,
    tap: function(event, target) {
        window.location = $(this).find('.carousel-item.active a').attr('href');
    },
    excludedElements:"label, button, input, select, textarea, .noSwipe"
    } );

    $('.carousel .carousel-inner').on('dragstart', 'a', function () {
        return false;
    });  

});

And that’s it, pretty simple, right?

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Change Ordering of Bootstrap 4 Columns on Mobile

In this article, we are going to show you how you can change the ordering of columns using Bootstrap 4. By this, we mean we can actually order the alter of the columns in which they are displayed, differently from mobile to desktop, or at a particular breakpoint for that matter.

By using .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g. .order-1.order-md-2). This includes support for 1 through 12 across all five grid tiers.
.
There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.

So, how do we do it exactly? Well, let’s start with the HTML markup, this is the part that controls it all actually: (if you prefer going straight to the CodePen, then click here)


<div class="container">

  <h2>Without column ordering</h2>
  <div class="row">
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=A" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=B" alt="" class="w-100" />
    </div>
  </div>

  <h2>With column ordering</h2>
  <div class="row">
    <div class="col-sm-6 order-sm-12">
      <img src="https://dummyimage.com/400x400/000/fff&text=B" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-sm-1">
      <img src="https://dummyimage.com/400x400/000/fff&text=A" alt="" class="w-100" />
    </div>
  </div>

  <h2>12 columns - Descending Order</h2>
  <div class="row">
    <div class="col-sm-6 order-12">
      <img src="https://dummyimage.com/400x400/000/fff&text=1" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-11">
      <img src="https://dummyimage.com/400x400/000/fff&text=2" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-10">
      <img src="https://dummyimage.com/400x400/000/fff&text=3" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-9">
      <img src="https://dummyimage.com/400x400/000/fff&text=4" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-8">
      <img src="https://dummyimage.com/400x400/000/fff&text=5" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-7">
      <img src="https://dummyimage.com/400x400/000/fff&text=6" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=7" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-5">
      <img src="https://dummyimage.com/400x400/000/fff&text=8" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-4">
      <img src="https://dummyimage.com/400x400/000/fff&text=9" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-3">
      <img src="https://dummyimage.com/400x400/000/fff&text=10" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-2">
      <img src="https://dummyimage.com/400x400/000/fff&text=11" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-1">
      <img src="https://dummyimage.com/400x400/000/fff&text=12" alt="" class="w-100" />
    </div>
  </div>

  <h2>12 columns - Ascending Order</h2>
  <div class="row">
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=1" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=2" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=3" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=4" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=5" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=6" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=7" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=8" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=9" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=10" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=11" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=12" alt="" class="w-100" />
    </div>
  </div>
</div>

Alongside this, we added the following CSS, although this isn’t particularly required for our example:


* {
  font-family: 'Roboto', sans-serif;
}

h2 {margin-top:2em;}
.container {
  padding: 2rem;
}

.order-sm-12 img {
  border: 5px solid orange;
}

.order-sm-1 img {
  border: 5px solid blue;
}

In this example, we have demonstrated how you would display a grid ‘without column ordering’, ‘with column ordering’, ’12 columns – Descending Order’, and ’12 columns – Ascending Order’.

Okay, if you didn’t understand how the above works, it’s not a problem. The thing to remember here is that when we are using order-sm-x and order-x we are doing this using mobile-first methods. So, let’s say we wanted the first column which appears on desktop first, but then last on mobile; in our HTML markup, we would add the column that we want to display on mobile (first) above the column that we want to display on the desktop. Once you have done this, order-sm-x determines the breakpoint in which we want to change the ordering on desktop, so once -sm is triggered, the order will change based on the order-x value.

We hope we have explained this well enough to get how this works if in doubt, check out the CodePen Example, or drop us a comment below, we’ll assist if you’re in doubt, that’s just what we do 😉

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Make the Bootstrap 4 Navbar Dropdown Work on Hover Instead of Click

If you have ever created your own Bootstrap Navbar with a dropdown menu, the first thing you may notice is that you have to click the parent link to reveal the sub-menu. This is an intentional design decision according to Mark Otto:

“The purpose of a hover state is to indicate something is clickable (underlined text) or to provide some quick information (full URL in a tooltip). The purpose of a click is to actually do something, to take explicit action.” – Mark Otto

It’s a valid point but there are always situations where people prefer the hover method. To be honest, not a lot of menus even feature the down chevron, so the hover element makes it clearer that there are sub-menu items to be clicked.

In this tutorial, we are going to be using Bootstrap 4 with the Jumbotron template as an example to show you how simple it is to achieve.

Prefer to dive straight into the CodePen, then click here.

Let’s Begin

Okay, let’s say we have the following HTML markup:


   <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<main role="main">

  <!-- Main jumbotron for a primary marketing message or call to action -->
  <div class="jumbotron">
    <div class="container">
      <h1 class="display-3">Menu Dropdown on Hover</h1>
      <p>Hey ho, so let's make your dropdown menu work on hover instead of click.</p>
      <p><a href="https://silvawebdesigns.com/" target="_blank" class="btn btn-primary btn-lg" role="button" rel="noopener noreferrer">Learn more &raquo;</a></p>
    </div>
  </div>

  <div class="container">
    <!-- Example row of columns -->
    <div class="row">
      <div class="col-md-4">
        <h2>Learn</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Code</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Repeat</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
    </div>

    <hr>

  </div> <!-- /container -->

</main>

<footer class="container">
  <p>&copy; Silva Web Designs 2020</p>
</footer>

Now, the important part, to get the CSS to work on hover instead of click, we will be adding the following CSS:


body {
    padding-top: 60px;
    padding-bottom: 40px;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

The key feature of the CSS is simply adding display: block; to the following class element; .dropdown:hover .dropdown-menu

And it’s really as simple as that.

We will need to include the Bootstrap Assets which as of the time of writing, the latest are:

With the CSS code, simply add the stylesheet <link> into your <head> before all other stylesheets to load your CSS.


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

The with the JS, they require jQuery, and their own JavaScript plugins. Place the following scripts near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then the Bootstrap JavaScript plugins.

Bootstrap uses the jQuery’s slim build, but the full version is also supported:


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

And there we have it, it’s as simple as that really! Some common problems can be due to the order/positioning of the CSS/JS files, but other than that, it’s a simple feature to implement. You can also make it a bit fancier as well and add some animations into the mix to make the dropdown menu slide down/up. If you would like any help with this, don’t hesitate to get back to us in the comments and we’ll show you how it’s done.

We hope you’ve enjoyed this article and happy coding devs!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Add a Single Bootstrap Carousel to a Single Product Gallery using WooCommerce

Today we are going to show you how to replace the WooCommerce Gallery and Thumbnails to a single Bootstrap 4 Carousel.

We’re going to assume that you have already added WooCommerce Support and WooCommerce Product Gallery Slider, if not, you can add these by adding the following code to your functions.php file:


add_theme_support('woocommerce');
add_theme_support( 'wc-product-gallery-slider' );

# You can also add Lightbox Gallery as follows:
add_theme_support( 'wc-product-gallery-lightbox' );

So if you have added a featured image and a gallery to your single product, once styled you will end up something that looks like this:

This already works as a slider, but you have to use the thumbnails to navigate between the different images.

The way that we added a Bootstrap 4 carousel to this in place of the thumbnails was as follows:

Step 1

Navigate to the following directory; /wp-content/plugins/woocommerce/templates/single-product

Copy the product-image.php to your child theme folder, for this; this will be placed in /your-theme/woocommerce/single-product directory.

It’s always best-practise to copy any WooCommerce templates to your theme or child folder, the reason for this is that these files wouldn’t end up being replaced if you update the file in the /plugins/ directory.

Step 2

We are now going to remove the following section from the product-image.php file:


<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
	<figure class="woocommerce-product-gallery__wrapper">
		<?php
		if ( $product->get_image_id() ) {
			$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
		} else {
			$html  = '<div class="woocommerce-product-gallery__image--placeholder">';
			$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
			$html .= '</div>';
		}

		echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped

		do_action( 'woocommerce_product_thumbnails' );
		?>
	</figure>
</div>

And we are going to replace this with the following:


<?php
    global $product;

    $attachment_ids = $product->get_gallery_image_ids();
    $image_links[] = get_the_post_thumbnail_url();
    $product_inc = 1;

    foreach( $attachment_ids as $attachment_id ) {
        $image_links[] = wp_get_attachment_url( $attachment_id );
    }
?>

<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
	<!-- Product Carousel -->
	<div id="product-carousel" class="carousel slide carousel-fade" data-ride="carousel">
		<div class="carousel-inner" role="listbox">
			<?php
			    foreach( $image_links as $image_link_url ) { ?>
			    	<div class="carousel-item <?php echo ($product_inc==1)?'active':''; ?>">
			        	<?php echo '<img class="prod-car-img" src="'.$image_link_url.'" />'; ?>
			        </div>
			        <?php $product_inc++;
			    }
			?>
		</div>	
		<a class="carousel-control-prev" href="#product-carousel" 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="#product-carousel" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>						
	</div><!-- #Product Carousel -->
</div>

Result

To summarise what we have done here, we have basically added the ‘featured-image’ to an array (image_links[]). We then looped through the thumbnails to get the image URL’s of the product gallery and then looped the array containing all images together in the Bootstrap 4 Carousel.

What do you end up with?

We now have a Bootstrap 4 Carousel which combines the featured image with the product gallery, we have removed the thumbnails and instead added a Bootstrap 4 carousel in its place.

Awesome huh?

If you need any help, or if this has helped you; please leave a comment below!

Happy coding folks!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to include both Desktop and Mobile versions for images within an ACF Repeater Field / Image Field

Today, we will show you how you can have different versions for images for your ACF Fields within WordPress. This will work for images, ACF Repeaters and so on…

Recently, we built a website and we used the ACF Repeater field to create the contents for a Carousel using Bootstrap. For this particular job, we needed to use different images for the desktop and mobile version.

So first things first, create a field for ‘Desktop Hero Image’ and a separate field for ‘Mobile Hero Image’.

For our particular example, we ended up with an ACF Repeater as below:

For the full code for a Bootstrap 4 Carousel in WordPress, see the code at the end of this post.

Now, we’ll show you what we did to have a desktop and mobile version for the hero image. If you’ve already created this, you might have a field like this:


    <span class="hero-slider" style="background-image: url(<?php the_sub_field('desktop_hero_image'); ?>);"</span>

What we need to do is amend this and create a data attribute for both the desktop and mobile version, as per the below example:


    <span class="hero-slider" style="background-image: url(<?php the_sub_field('desktop_hero_image'); ?>);" data-small-src="<?php echo get_sub_field('mobile_hero_image'); ?>"  data-lrg-src="<?php the_sub_field('desktop_hero_image'); ?>"></span>

Next, we need to add some jQuery code to change the hero image based on the browser width. In our example, we wanted to change the hero image if the window width is equal to or less than 575px. To do this, we added the below jQuery code:

<code class="language-JS">
    // Desktop/Mobile Hero Images

    var windowWidth = $(window).width();

    if (windowWidth <= 575) {
      $('[data-small-src]').each(function() {
        var small_src = $(this).data('small-src');
        $(this).css({'background-image':'url('+small_src+')'});
      });
    } else {
      $('[data-lrg-src]').each(function() {
        var lrg_src = $(this).data('lrg-src');
        $(this).css({'background-image':'url('+lrg_src+')'});
      });            
    } 

One thing to note is that the above code will only work on page load. So if you are resizing the browser, the above code will not change the image. We can, however, fix this by using the resize function. To do this, simply add the below code:

<code class="language-JS">
    // Desktop/Mobile Hero Images + Resize Function

    $(window).bind('resize',function(){

        var windowWidth = $(window).width();

        if (windowWidth <= 575) {
          $('[data-small-src]').each(function() {
            var small_src = $(this).data('small-src');
            $(this).css({'background-image':'url('+small_src+')'});
          });
        } else {
          $('[data-lrg-src]').each(function() {
            var lrg_src = $(this).data('lrg-src');
            $(this).css({'background-image':'url('+lrg_src+')'});
          });            
        }

    });

    var windowWidth = $(window).width();

    if (windowWidth <= 575) {
      $('[data-small-src]').each(function() {
        var small_src = $(this).data('small-src');
        $(this).css({'background-image':'url('+small_src+')'});
      });
    } else {
      $('[data-lrg-src]').each(function() {
        var lrg_src = $(this).data('lrg-src');
        $(this).css({'background-image':'url('+lrg_src+')'});
      });            
    } 

Well, we hope this has helped you.

If you are wanting to know how to create a basic carousel using Bootstrap 4 with an ACF Repeater, please refer to the below code:


	<!-- Home Carousel -->
	<div id="homepage-carousel" class="carousel slide carousel-fade" data-ride="carousel" data-touch="true" data-interval="6000">
		<ul class="carousel-indicators">
			<?php 
				$count = 0;
				while( have_rows('hero_carousel') ): the_row();
					if ($count == 0) {
						echo '<li data-target="#homepage-carousel" data-slide-to="0" class="active"></li>';
					} else {
						echo '<li data-target="#homepage-carousel" data-slide-to="'.$count.'"></li>';
					}
				$count++; endwhile;
			?>				
		</ul>
		<div class="carousel-inner" role="listbox">
			<?php
				if( have_rows('hero_carousel') ): $counter = 1; ?>

				    <?php while ( have_rows('hero_carousel') ) : the_row(); ?>

						<div class="carousel-item <?php echo ($counter==1)?'active':''; ?>">
							<div class="container">
						      <div class="title-container">
						            <div class="headline animated fadeInLeft">
						            	<div class="row">
						            		<div class="col-md-8">
								                <h1><?php the_sub_field('title'); ?></h1>
								                <p class="txt-headline"><?php the_sub_field('text'); ?></p>
								                <?php if(get_sub_field('button_text')) { ?>
								                	<a href="<?php the_sub_field('button_url'); ?>" class="btn"><?php the_sub_field('button_text'); ?></a>
								                <?php } ?>
								            </div>
						            	</div>
						            </div>
						       </div>
						    </div>
						    <div class="homepage-overlay">   					
					        	<span class="hero-slider" style="background-image: url(<?php the_sub_field('image'); ?>);" data-small-src="<?php echo get_sub_field('mobile_image'); ?>"  data-lrg-src="<?php the_sub_field('image'); ?>"></span>
					        </div>
						</div>

				    <?php $counter++; endwhile;
				else : endif; 
			?>
		</div>				
	</div><!-- #Home Carousel -->

As always, we hope you enjoyed this tutorial... If this has helped you, leave a comment below! Happy Coding! O_o

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share