Building Carousel from Scratch

  • I am trying to build a carousel from scratch, similar to the one used by the “infinity news” theme. It’s added to the customizer and the user is able to choose which posts are seen via categories.

    I would like something similar for my child-theme of “Type”. According to the infinity news theme, it uses / used slick as its base.

    https://kenwheeler.github.io/slick/

    I have tried to follow these instructions and have not been able to get even a base of a carousel. I haven’t attempted to add to the customizer yet as there’s no point if I don’t have something to work with. Can someone please help?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator t-p

    (@t-p)

    First, there are many free plugins in the plugin repo https://www.ads-software.com/plugins/search/Carousel/

    Second, if must create from scratch, there numerous tutorials: https://www.google.com/search?client=firefox-b-1-d&q=Building+Carousel+from+Scratch+wordpress

    Thread Starter littlebear211

    (@littlebear211)

    Hi, I’m building from scratch as a plugin doesn’t tend to come with the themes and I am hoping to build a theme (long way away from that at the moment) 

    <div class="container">
	<div class="row">
		<div class="col-sm-12">
			<div id="my-slider" class="carousel slide" data-ride="carousel">
				<!-- indicators dot nav -->
				<ol class="carousel-indicators">
				    <li data-target="#my-slider" data-slide-to="0" class="active"></li>
				    <li data-target="#my-slider" data-slide-to="1"></li>
				</ol>
				<!-- wrapper -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/surprising-flower-meanings-balloon-flowers-1650767465.jpg" alt="flower">
						<div class="carousel-caption">
							<h1>Flower</h1>
						</div>
					</div>
					<div class="item">
						<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/surprising-flower-meanings-balloon-flowers-1650767465.jpg">
						<div class="carousel-caption">
							<h1>Flower2</h1>
						</div>
						</div>
				
				</div>
				<!--controls --> 
				<a class="left carousel-control" href="#my-slider" role="button" data-slide="prev"> 
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only"> Previous</span>
				</a>
					<a class="right carousel-control" href="#my-slider" role="button" data-slide="next"> 
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only"> Next</span>
				</a>
			</div>
			
		</div>

    This is the code I currently have. It’s static, is there a way to get the code to update based on what the user selects? e.g category.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Building Carousel from Scratch’ is closed to new replies.