How to create the arrows for a slider

0_0Nathan · January 1, 2018, 7:57pm

Hi

I have began making an example of a slider, I have run it through validator and everything seems to be fine.

But I have hidden the overflow content as I do not like the scroll bar and I am having trouble on figuring out how to add like left and right arrows to move like a scrollbar…

Any Ideas on how to go about it? I don’t know how to even really get started is there any sites or links that could help me get a hang of using sliders as I want to learn how to use them.

Here is my HTML and CSS Please do not recommend me to use javascript or JQuery.

HTML:

<ul>
		<li><h3>Example slider</h3></li>
		<li>
			<ul>
				<li class="tabs">
					<ul class="content">
						<li><img src="Koala.jpg" alt="Koala"></li>
						<li>Date</li>
						<li>Title</li>
						<li>Province - City</li>
					</ul>
				</li>
				
				<li class="tabs">
					<ul class="content">
						<li><img src="Koala.jpg" alt="Koala"></li>
						<li>Date</li>
						<li>Title</li>
						<li>Province - City</li>
					</ul>
				</li>
				
				<li class="tabs">
					<ul class="content">
						<li><img src="Koala.jpg" alt="Koala"></li>
						<li>Date</li>
						<li>Title</li>
						<li>Province - City</li>
					</ul>
				</li>
				
				<li class="tabs">
					<ul class="content">
						<li><img src="Koala.jpg" alt="Koala"></li>
						<li>Date</li>
						<li>Title</li>
						<li>Province - City</li>
					</ul>
				</li>
				
				<li class="tabs">
					<ul class="content">
						<li><img src="Koala.jpg" alt="Koala"></li>
						<li>Date</li>
						<li>Title</li>
						<li>Province - City</li>
					</ul>
				</li>
				
				<li class="tabs">
					<ul class="content">
						<li><img src="Koala.jpg" alt="Koala"></li>
						<li>Date</li>
						<li>Title</li>
						<li>Province - City</li>
					</ul>
				</li>
				
				<li class="tabs">
					<ul class="content">
						<li><img src="Koala.jpg" alt="Koala"></li>
						<li>Date</li>
						<li>Title</li>
						<li>Province - City</li>
					</ul>
				</li>
				
				<li class="tabs">
					<ul class="content">
						<li><img src="Koala.jpg" alt="Koala"></li>
						<li>Date</li>
						<li>Title</li>
						<li>Province - City</li>
					</ul>
				</li>
				
				<li class="tabs">
					<ul class="content">
						<li><img src="Koala.jpg" alt="Koala"></li>
						<li>Date</li>
						<li>Title</li>
						<li>Province - City</li>
					</ul>
				</li>
				
				<li class="tabs">
					<ul class="content">
						<li><img src="Koala.jpg" alt="Koala"></li>
						<li>Date</li>
						<li>Title</li>
						<li>Province - City</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>

CSS:

	*{
		box-sizing:border-box;
	}
	body{
		background-color:#3a3a3a;
		margin:0px;
		padding:0px;
	}
	ul{
		background-color:#1a1a1a;
		list-style:none;
		color:#fff;
		overflow:hidden;
		white-space:nowrap;
		padding:10px;
	}

	.tabs{
		display:inline-block;
		width:25%;
		position:relative;
		z-index:1;
	}
	ul img{
		max-width:100%;
	}
		
@media (max-width:700px){
	.tabs{
		display:inline-block;
		width:33.3%;
		position:relative;
		z-index:1;
	}
}
@media (max-width:500px){
	.tabs{
		display:inline-block;
		width:50%;
		position:relative;
		z-index:1;
	}
}
@media (max-width:300px){
	.tabs{
		display:inline-block;
		width:100%;
		position:relative;
		z-index:1;
	}
}

I do apologize for the nested UL’s it just helps avoid breaking the lists and seems to help center the content as using spans had some unexpected effects anyway it seems to work so why not?

Any help would be appreciated.

SO it could be either arrows on the sides or simple 2 arrows next to each other or anything that could help move to the left or right of the content holder.

Andres_Vaquero · January 3, 2018, 4:30am

Unfortunately in order to make a scroll bar move after clicking a button you need JavaScript, luckily it should not be overly complex.

I did some minor fixes to the HTML (added the buttons and note I’ve also added an id to the slider container):

<ul>
	<li><h3>Example slider</h3></li>
	<li>
		<button class='leftArrow'>&lt;</button>
		<ul id='slider'>
			<li class="tabs">
				<ul class="content">
					<li><img src="Koala.jpg" alt="Koala"></li>
					<li>Date</li>
					<li>Title</li>
					<li>Province - City</li>
				</ul>
			</li>
		
			<li class="tabs">
				<ul class="content">
					<li><img src="Koala.jpg" alt="Koala"></li>
					<li>Date</li>
					<li>Title</li>
					<li>gfdgd</li>
				</ul>
			</li>
		
			<li class="tabs">
				<ul class="content">
					<li><img src="Koala.jpg" alt="Koala"></li>
					<li>Date</li>
					<li>Title</li>
					<li>dfgdfgdfgfd</li>
				</ul>
			</li>
		
			<li class="tabs">
				<ul class="content">
					<li><img src="Koala.jpg" alt="Koala"></li>
					<li>Date</li>
					<li>Title</li>
					<li>Province - City</li>
				</ul>
			</li>
		
			<li class="tabs">
				<ul class="content">
					<li><img src="Koala.jpg" alt="Koala"></li>
					<li>Date</li>
					<li>Title</li>
					<li>Province - City</li>
				</ul>
			</li>
		
			<li class="tabs">
				<ul class="content">
					<li><img src="Koala.jpg" alt="Koala"></li>
					<li>Date</li>
					<li>Title</li>
					<li>Province - City</li>
				</ul>
			</li>
		
			<li class="tabs">
				<ul class="content">
					<li><img src="Koala.jpg" alt="Koala"></li>
					<li>Date</li>
					<li>Title</li>
					<li>Province - City</li>
				</ul>
			</li>
		
			<li class="tabs">
				<ul class="content">
					<li><img src="Koala.jpg" alt="Koala"></li>
					<li>Date</li>
					<li>Title</li>
					<li>Province - City</li>
				</ul>
			</li>
		
			<li class="tabs">
				<ul class="content">
					<li><img src="Koala.jpg" alt="Koala"></li>
					<li>Date</li>
					<li>Title</li>
					<li>Province - City</li>
				</ul>
			</li>
		
			<li class="tabs">
				<ul class="content">
					<li><img src="Koala.jpg" alt="Koala"></li>
					<li>Date</li>
					<li>Title</li>
					<li>Province - City</li>
				</ul>
			</li>
		</ul>
		<button class='rightArrow'>&gt;</button>
	</li>
</ul>

Then I added this little JavaScript to enable the scrolling once we click (note you might think it doesn’t move because all your slider elements have the same contents, that puzzled me a bit)

<script type="text/javascript">
	
	var scrollContainer = function(container, direction) {
		var amount = direction * container.clientWidth;
		container.scrollLeft+=amount; 
	}

	var sliderContainer = document.getElementById('slider');

	var leftArrow = document.querySelector(".leftArrow");
	leftArrow.addEventListener('click', function(){
		scrollContainer(sliderContainer, -1);
	});
	
	var rightArrow = document.querySelector(".rightArrow");
	rightArrow.addEventListener('click', function(){
		scrollContainer(sliderContainer, 1);
	});
	
</script>

Hope that helps, unfortunately I do not think there is a solution without JS, but as you’ve seen it’s not too complex. Let me know id you need an explanation of what the code does.

Mittineague · January 3, 2018, 4:48am

Do you think the pseudo class “active” could be used?

It looks like good support with the exception of mobile Safari

Andres_Vaquero · January 3, 2018, 4:53am

Good point! I’m not sure however how would you make it scroll incrementally…

Mittineague · January 3, 2018, 6:24am

Thinking about it, active could toggle OK, but to slide more than two, if at all possible, would require shuffling around a lot of elements to avoid JavaScript completely. And it would still need JavaScript for mobile Safari.

I think I would default to all image tabs displaying with JavaScript to do the sliding for more than two. And JavaScript to add the arrows and their event handlers.

0_0Nathan · January 3, 2018, 12:33pm

Andres_Vaquero:

var scrollContainer = function(container, direction) {
	var amount = direction * container.clientWidth;
	container.scrollLeft+=amount; 
}

var sliderContainer = document.getElementById('slider');

var leftArrow = document.querySelector(".leftArrow");
leftArrow.addEventListener('click', function(){
	scrollContainer(sliderContainer, -1);
});

var rightArrow = document.querySelector(".rightArrow");
rightArrow.addEventListener('click', function(){
	scrollContainer(sliderContainer, 1);
});

</script>

Your code works quite well with the desktop but if were to shrink the screen to different media queries @700 @500 @300 you will start noticing the effect of the gallery which is really bad I do thank you for that idea as it does do what i want

0_0Nathan · January 3, 2018, 12:37pm

to my understanding of the :active pesudo will only work while on active state meaning on click if I were to use that on arrows or something it will do the action aslong as the user holds the left mouse button how would I keep it that way after the click state.

meaning its like clicking to go up or down using the active class to go down how would I let it stay at the bottom part as soon as letting go of the button it will revert to it’s original styles?

Mittineague · January 3, 2018, 3:04pm

Good catch, I guess the “:visited” pseudo class would be more appropriate. But again, unless it is a “slider of two” JavaScript is the approach to take.

system · April 4, 2018, 10:04pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.