HOW TO – Slide logo using slick slider

HOW TO – Slide logo using slick slider

Date posted : 30/01/2019

Introduction

Add a responsive logo slideshow carousel to your site quickly and easily. Embed in any post/page using short code or in your theme.

Perfect for displaying a list of sponsor or client logos.

Example :

Source code for HTML , CSS AND JQUERY:

1. HTML:

Here i have attached a placeholder image reference. Please make changes in the according to your clients, partners, Images, based on your reference.

<!-- Check settings for slicks JS & CSS  -->

	

		
	
			
your content1
		</div>
	</div>
	

		
	
			
your content2
		</div>
	</div>
		

		
	
			
your content3
		</div>
	</div>
		

		
	
			
your content2
		</div>
	</div>
		

		
	
			
your content4
		</div>
	</div>
</div>

2 . CSS:

Place your height pixels, based on your requirement.

.slide {
     height:40px;
 }

3 . Jquery:

The Jquery, which makes our site more attractive by sliding from left to right.

$('.slider').slick({
	infinite: true,
	slidesToShow: 3,
	slidesToScroll: 1,
	arrows: true,
	autoplay: true,
	autoplaySpeed: 2000,
	responsive: [
		{
			breakpoint: 1200,
			settings: {
				slidesToShow: 2,
				slidesToScroll: 1
			}
		},
		{
			breakpoint: 1008,
			settings: {
				slidesToShow: 1,
				slidesToScroll: 1
			}
		},
		{
			breakpoint: 800,
			settings: {
				slidesToShow: 1,
				slidesToScroll: 1
			}
			// settings: "unslick"
		}

	]
});

Solution and output:

By using this HTML,CSS AND JQUERY combination, you will easily slides a content .

Thank you! for using PHEONIX SOLUTIONS.

VISIT US :

OFFICIAL SITE – https://pheonixsolutions.com/

BLOG SITE – https://blog.pheonixsolutions.com/

You find this tutorial helpful? Share with your friends to keep it alive.Be the first to comment, we value your suggestions. For further queries please comment below.