Develop Reference

What is wrong with my image slideshow? - Vanilla Javascript

I've coded a simple image slideshow using Vanilla JS which unfortunately isn't working. It's structured in a 'section', within a 'container'. The overflow of the container is hidden, and there are relative 'span' circles below it which I want to use to control the slideshow.
Here is my code so far:
// Variables
let i;
let image = document.getElementsByClassName("image");
let slideIndex = 1;
let dots = document.getElementsByClassName("dots");
// Functions
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showImage(n) {
if (n > image.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = image.length;
}
for (i = 0; i < image.length; i++) {
image[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace("active", "");
}
image[slideIndex-1].style.display = "block";
dots[slideIndex-1].classList.add("active");
}
showImage(slideIndex);
body {
margin: 0;
padding: 0;
font-family: Helvetica;
}
.image-section {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
background-color: #303960;
}
.image-container {
height: 600px;
width: 900px;
overflow: hidden;
background-color: #f9f9f9;
}
.image {
height: 600px;
width: 900px;
}
.image-controller {
height: 10vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.dots {
height: 30px;
width: 30px;
border-radius: 100%;
background-color: #fff;
margin: 0 10px;
cursor: pointer;
}
.active {
background-color: #f96d80;
}
<section class="image-section">
<div class="image-container">
<div class="image" style="background-color: black">
</div>
<div class="image" style="background-color: red">
</div>
<div class="image" style="background-color: blue">
</div>
<div class="image" style="background-color: orange">
</div>
<div class="image" style="background-color: purple">
</div>
<div class="image" style="background-color: brown">
</div>
</div>
<div class="image-controller">
<span class="dots active" onclick="currentSlide(1)"></span>
<span class="dots" onclick="currentSlide(2)"></span>
<span class="dots" onclick="currentSlide(3)"></span>
<span class="dots" onclick="currentSlide(4)"></span>
<span class="dots" onclick="currentSlide(5)"></span>
<span class="dots" onclick="currentSlide(6)"></span>
</div>
</section>
I'm assuming it's a problem with my for loop, but I could be wrong. Any advice would be great!

Was this something you had in mind? You made the code a bit too complex.
I changed everything in your javascript code, because nothing really worked with all your different method names and how they were called. Thought it was easier for me to just type a few lines of code to show a different way of thinking.
Your images (it should be called "images", not "image" because there are several of them) and dots arrays start at position 0, so use that. Start by adding 0 as a parameter in your onclick method on your first dot element.
Then just keep track of the previous index (prevSelection) and remove the .active class from the previously selected image and dot, while adding .active to the newly selected image and dot. I added CSS style for .active for .image.
If you want to add a sliding animation, this is not the way to go, however.
// Variables
let images = document.getElementsByClassName("image");
let dots = document.getElementsByClassName("dots");
var prevSelection = 0;
function showSlides(slidePosition) {
removeClass('active', prevSelection);
addClass('active', slidePosition);
prevSelection = slidePosition;
}
function removeClass(className, slidePosition) {
dots [slidePosition].classList.remove(className);
images[slidePosition].classList.remove(className);
}
function addClass(className, slidePosition) {
dots [slidePosition].classList.add(className);
images[slidePosition].classList.add(className);
}
body {
margin: 0;
padding: 0;
font-family: Helvetica;
}
.image-section {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
background-color: #303960;
}
.image-container {
height: 600px;
width: 900px;
overflow: hidden;
background-color: #f9f9f9;
}
.image {
display: none;
height: 600px;
width: 900px;
}
.image.active { /* added this */
display: block;
}
.image-controller {
height: 10vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.dots {
height: 30px;
width: 30px;
border-radius: 100%;
background-color: #fff;
margin: 0 10px;
cursor: pointer;
}
.dots.active { /* added .dots for better clarity */
background-color: #f96d80;
}
<section class="image-section">
<div class="image-container">
<div class="active image" style="background-color: black">
</div>
<div class="image" style="background-color: red">
</div>
<div class="image" style="background-color: blue">
</div>
<div class="image" style="background-color: orange">
</div>
<div class="image" style="background-color: purple">
</div>
<div class="image" style="background-color: brown">
</div>
</div>
<div class="image-controller">
<span class="active dots" onclick="showSlides(0)"></span>
<span class="dots" onclick="showSlides(1)"></span>
<span class="dots" onclick="showSlides(2)"></span>
<span class="dots" onclick="showSlides(3)"></span>
<span class="dots" onclick="showSlides(4)"></span>
<span class="dots" onclick="showSlides(5)"></span>
</div>
</section>

Making a carousel that slides on mouse scroll

I am trying to create a similar carousel like the one on https://ueno.co/about/ (under the "value" section), that scrolls as the user continue to scroll down the page and then displays more information beneath it by adding the class .show to the hidden divs that will be below.
So far I have been using the flickity API and have created most of the setup necessary.
The only thing that is missing is being able to scroll through the carousel using the mouse wheel once it is in focus (which is setup once the user scrolls to it).
My guess was that I could simulate a left and right arrow key press when it is in focus which will change each slide, but if there is a cleaner way I would gladly use that.
jQuery(document).ready(function( $ ) {
var $carousel = $('.js-carousel');
$carousel.flickity({
prevNextButtons: false,
pageDots: false
});
// Split each word in the cell title into a span.
var $cellTitle = $('.js-cell-title');
// Wrap every letter in the cell title
$cellTitle.each(function() {
var $this = $(this);
var letters = $this.text().split('');
$this = $(this);
$this.empty();
$.each(letters, function(i, el) {
$this.append($('<span class="text-split">')
.append($('<span class="text-split__inner">')
.text(el)));
});
// Dirty way of getting the whitespace
var emptySplits = $this.find('.text-split__inner:contains( )');
emptySplits.addClass('whitespace');
emptySplits.parent().addClass('whitespace');
});
//focus the carousel when it is scrolled to
$(window).scroll(function() {
var carousel = $(".carousel");
var carouselTop = $('.carousel').offset().top;
var carouselHeight = $('.carousel').outerHeight();
var windowHeight = $(window).height();
var scrollTop = $(this).scrollTop();
var isScrollMode = carousel.hasClass('scrollMode');
var isInView = scrollTop > (carouselTop+carouselHeight-windowHeight) &&
(carouselTop > scrollTop) && (scrollTop+windowHeight > carouselTop+carouselHeight);
if(!isInView && isScrollMode){
carousel.removeClass('scrollMode');
carousel.blur();
console.log('EXIT');
} else if (!carousel.hasClass('scrollMode') && isInView){
carousel.addClass('scrollMode');
carousel.focus();
//NEEDS FUNCTION TO SCROLL THE CAROUSEL
console.log('ENTER');
}
});
//end of carousel event
function carouselEnd() {
var cells = $(".carousel-cell");
var numberOfCells = cells.length;
var lastCell = cells[numberOfCells - 1];
if( lastCell.classList.contains('is-selected') ){
//will add .show class to the hidden content
}
}
$carousel.on( 'settle.flickity', function( event, pointer ) {
carouselEnd();
});
});
.carousel{
.row{
margin:0;
}
.carousel-cell {
width: 66%;
margin-right: 3rem;
}
.cell__wrap {
width: 100%;
margin: 0 auto;
}
.cell__inner {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.cell__title {
position: absolute;
z-index: 1;
top: 50%;
left: 0;
margin: 0;
transform: translateY(-50%) translateX(-20%);
}
.text-split {
overflow: hidden;
display: inline-block;
&.whitespace {
display: initial;
}
#for $i from 1 through 100 {
&:nth-child(#{$i}) .text-split__inner {
transition-delay: 0.02s * $i;
}
}
}
.text-split__inner {
transform: translateY(100%);
display: inline-block;
transition: transform 0.3s ease;
.is-selected & {
transform: translateY(0);
}
&.whitespace {
display: initial;
}
}
.cell__thumb {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
// Base styles
html,
body {
width: 100%;
height: 100%;
font-family: 'Work Sans', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
/* background-color: #00011D;
color: #FFF; */
}
.container {
width: 100%;
}
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity#2.0/dist/flickity.pkgd.min.js"></script>
</head>
<section class="carousel">
<div class="container a">
<div class="carousel js-carousel">
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
</div>
</div>
</section>

How to include angled brackets to the left and right of the active image slider in javascript

I have a simple image slider as shown in the fiddle below that slides upon clicking the active image when there are more images to show.
How can I include angled brackets to the left and right of the active image to inform and enable users to transition between images?
I will also like to make sure that the angled brackets do not show when there are no more slides to transition to the left or right.
I was able to include the arrows on the images but unable to get them to perform the same action of triggering the slide change as occurs when the next or previous image is clicked.
Thanks for the help.
$(document).ready(function() {
let $slider = $(".sliderG");
let sliderItem = $slider.children(".item.active");
let i = $slider.children(".item");
let i2 = $slider.children("#Arrows");
let ind = 0;
$slider
.children(".item")
.each(function() {
$(this).attr("data-index", ind++);
});
i.on("click", function(e) {
const that = $(this);
let dataIndex = that.data("index");
$(".item").removeClass("active");
that.addClass("active");
});
i2.on("click", function(e) {
const that = $(this);
let dataIndex = that.data("index");
$(".item").removeClass("active");
that.addClass("active");
});
});
.sliderG {
width: 75%;
height: 80%;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: 50px;
}
.sliderG .item {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
position: absolute;
background: url(https://www.g-money.com.gh/wp-content/uploads/2019/06/squircle-minG.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border-radius: 10px;
transition: all ease 0.7s;
z-index: 1;
transform: scale(0.8);
left: -300px;
right: 0;
margin: 0 auto;
}
.sliderG .item.active {
left: 0;
right: 0;
z-index: 2;
opacity: 1;
background: #ccc;
transform: scale(1);
}
.sliderG .item img{
display: block;
width: 100%;
}
.sliderG .item.active ~ .item {
left: 0;
right: -300px;
}
.sliderG .item.active + .item ~ .item {
opacity: 0.3;
visibility: hidden;
}
.sliderG .item.active + .item ~ .item:hover{
opacity: 0.7;
}
#Arrows{
display: flex;
justify-content: space-between;
height: auto;
position: absolute;
width: 100%;
z-index: 9;
top: 50%;
}
#Arrows i{
background-color: rgba(255, 255, 255, 0.25);
color: #1C1D21;
cursor: pointer;
height: auto;
padding: 15px;
transition: background-color 0.5s, color 0.5s;
}
#Arrows i:first-of-type{
padding-right: 20px;
}
#Arrows i:last-of-type{
padding-left: 20px;
}
#Arrows i:hover{
background-color: rgba(28, 29, 33, 0.75);
color: #EEEFF7;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class='sliderG'>
<div class='item'>
<img src="https://www.g-money.com.gh/wp-content/uploads/2020/02/Sending-MoneyT-scaled.jpg" alt="G-Money Send Money">
</div>
<div class='item active'>
<img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Generate-VoucherT-scaled.jpg" alt="G-Money Cash-Out at Agent">
</div>
<div class='item'>
<img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Pay-MerchantT-scaled.jpg" alt="G-Money Pay Merchant">
</div>
<div class='item'>
<img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Buy-AirtimeT-scaled.jpg" alt="G-Money Buy Airtime">
</div>
<div class='item'>
<img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Bank-ServiceT-scaled.jpg" alt="G-Money Bank Account">
</div>
<div class='item'>
<img src ="https://www.g-money.com.gh/wp-content/uploads/2020/03/Withdraw-at-AgentT-scaled.jpg" alt="G-Money Withdraw at Agent">
</div>
<!--<div class='item'>
<img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Generate-VoucherT-scaled.jpg" alt="G-Money Pay Bill">
</div>-->
<div id="Arrows">
<i id="Prev" class="fa fa-chevron-left fa-3x" aria-hidden="true"></i>
<i id="Next" class="fa fa-chevron-right fa-3x" aria-hidden="true"></i>
</div>
</div>
</div>

Hi please try below changes:
<div id="Arrows">G-Money Send Money
<i id="Prev" onclick="changeSlide('prev');"class=" fa fa-chevron-left fa-3x" aria-hidden="true"></i>
<i id="Next" onclick="changeSlide('next');"class=" fa fa-chevron-right fa-3x" aria-hidden="true"></i>
</div>
</div>
And your javascript function should be something like this:
<script>
$(document).ready(function() {
let $slider = $(".sliderG");
let sliderItem = $slider.children(".item.active");
let i = $slider.children(".item");
//let i2 = $slider.children("#prev");
let ind = 0;
$slider
.children(".item")
.each(function() {
$(this).attr("data-index", ind++);
});
i.on("click", function(e) {
const that = $(this);
let dataIndex = that.data("index");
//alert(dataIndex);
$(".item").removeClass("active");
that.addClass("active");
});
});
function changeSlide(n) {
$('#Next').css("display", "block");
$('#Prev').css("display", "block");
let $slider = $(".sliderG");
//console.log(n);
var len = $slider.children(".item").length;
if(n == 'prev'){
//alert(n);
var sliderItem = $slider.children(".item.active").prev();
}
else {
var sliderItem = $slider.children(".item.active").next();
}
let index = sliderItem.data("index");
if(index != undefined) {
//alert(index);
$(".item").removeClass("active");
sliderItem.addClass("active");
if(index == 0) {
$('#Prev').css("display", "none");
}
else if(index == len-1) {
$('#Next').css("display", "none");
}
}
}
</script>

Creating a Javascript Slideshow Using Button ID

I'm trying to create a slideshow with Javascript using this HTML. Thanks
<body>
<button id="next"> <img src ="buttons/next.png"/> </button>
<button id="back"> <img src = "buttons/back.png"/> </button>
<div class="container">
<div style="display: inline-block;">
<img src="agctype.jpg"/></div>
<div>
<img src="America.jpg"/></div>
<div>
<img src= "sbjlogo2.jpg"/></div>
</div>

Checkout codepen.io , I did a search for simple slide show. This one looks good for beginners http://codepen.io/jonny_roller/pen/MaNGwV
HTML
A Simple Slideshow
<div class="slideshow" onmouseover="showControls(this)" onmouseout="hideControls(this)">
<div class="controls hidden">
<a id="previous" href="" onclick="return slideshowPrevious()">‹</a>
<a id="play" class="hidden" href="" onclick="return slideshowPlay()">⊲</a>
<a id="pause" href="" onclick="return slideshowPause()">||</a>
<a id="next" href="" onclick="return slideshowNext()">›</a>
</div>
<div id="slide1" class="slide display" style="background-image: url(http://lorempixel.com/400/200/sports/1/)">
<span>Cricket: Some text goes here</span>
</div>
<div id="slide2" class="slide" style="background-image: url(http://lorempixel.com/400/200/sports/2/)">
<span>Surfing: Some more text appears here</span>
</div>
<div id="slide3" class="slide" style="background-image: url(http://lorempixel.com/400/200/sports/3/)">
<span>Cycling: This is the text for the final slide... it's a bit longer</span>
</div>
</div>
Some text at the bottom
CSS
body {
font-family: Verdana;
}
.slideshow {
position: relative;
width: 400px;
height: 200px;
}
.controls a {
z-index: 10;
color: #fff;
position: absolute;
font-size: 30px;
text-decoration: none;
width: 40px;
height: 40px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 20px;
}
#previous {
top: 80px;
left: 5px;
}
#next {
top: 80px;
right: 5px;
}
#play, #pause {
top: 80px;
left: 180px;
text-align: center;
display: block;
}
#pause {
font-size: 20px;
line-height: 34px;
}
#play {
line-height: 34px;
}
.slide {
width: 100%;
padding-bottom: 50%; /* 200/400 */
position: absolute;
top: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
transition: opacity 0.5s ease;
opacity: 0;
}
.slide span {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: block;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px;
}
.display {
opacity: 1;
}
.hidden {
display: none !important;
}
JS
var delay=3;
var slides=document.getElementsByClassName('slide').length;
var current=1;
var timer = setTimeout(nextSlide, delay*1000);
function nextSlide() {
var next = (current == slides ? 1 : current + 1);
$('slide' + current).classList.remove('display');
$('slide' + next).classList.add('display');
current = next;
timer = setTimeout(nextSlide, delay*1000);
}
function slideshowNext() {
slideshowPause();
var next = (current == slides ? 1 : current + 1);
$('slide' + current).classList.remove('display');
$('slide' + next).classList.add('display');
current = next;
return(false);
}
function slideshowPrevious() {
slideshowPause();
var prev = (current == 1 ? slides : current - 1);
$('slide' + current).classList.remove('display');
$('slide' + prev).classList.add('display');
current = prev;
return(false);
}
function slideshowPause() {
clearTimeout(timer);
timer = false;
$('pause').classList.add('hidden');
$('play').classList.remove('hidden');
return(false);
}
function slideshowPlay() {
$('pause').classList.remove('hidden');
$('play').classList.add('hidden');
nextSlide();
return(false);
}
function showControls(slideshow) {
slideshow.children[0].classList.remove('hidden');
}
function hideControls(slideshow) {
if (timer) {
slideshow.children[0].classList.add('hidden');
}
}
function $(id) {
return(document.getElementById(id));
}

Why is my carousel snapping to the top on user interaction?

I've made a carousel on my single page website that displays some of my photography work. The problem I'm having is that whenever I click one of the arrows to access the next picture - left or right, I am instantly snapped to the top of the page!
I've checked through both the CSS and JS and I can't seem to find any reason as to why this would be occurring.
HTML:
<div class="container">
<h3><span class="underline">Exploration</span></h3>
<p>I love exploring and capturing epic moments on my journeys. Here's some of my favourites from my latest trip across the west coast of America.</p>
</div>
<div class="slider">
<!--SLIDE 1 START-->
<div class="slide active-slide slide-feature slide-feature-1">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 1 END-->
<!--SLIDE 2 START-->
<div class="slide slide-feature slide-feature-2">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 2 END-->
<!--SLIDE 3 START-->
<div class="slide slide-feature slide-feature-3">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 3 END-->
<!--SLIDE 4 START-->
<div class="slide slide-feature slide-feature-4">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 4 END-->
<!--SLIDE 5 START-->
<div class="slide slide-feature slide-feature-5">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 5 END-->
</div>
<div class="slider-nav">
<img src="images/arrow-left.svg">
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<img src="images/arrow-right.svg">
</div>
</div>
<!--FLIPBOARD ENDS HERE-->
</div>
CSS:
.exploration {
height: 1100px;
background-color: #ffffff;
}
.exploration .container {
position: relative;
top: 35px;
width: 1200px;
}
.exploration h3 {
color: #313131;
font-size: 40px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
padding-bottom: 20px;
text-align: center;
}
.exploration p {
color: #313131;
font-size: 20px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
text-align: center;
}
.slider {
position: relative;
top: 50px;
width: 100%;
height: 800px;
}
.slide {
display: none;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
/* Slide feature */
.slide-feature {
text-align: center;
height: 800px;
}
.slide-feature-1 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11036160_10152854777396270_5157414753497878003_o.jpg');
background-position: center;
}
.slide-feature-2 {
background-image: url('https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xta1/t31.0-8/11218515_10152909922431270_7749144937209461633_o.jpg');
background-position: center;
}
.slide-feature-3 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xpa1/t31.0-8/11187795_10152891725491270_1769195601160147349_o.jpg');
background-position: bottom;
}
.slide-feature-4 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11154672_10152854784061270_3532862830070230799_o.jpg');
background-position: center;
}
.slide-feature-5 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/11164749_10152909922426270_8192461025609874418_o.jpg');
background-position: center;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
position: relative;
top: 40px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
position: relative;
top: 40px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
position: relative;
top: 40px;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #7FCCE5;
}
JS:
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
//Next Arrow Functionality
$('.arrow-next').click(function() {
var currentSlide=$('.active-slide');
var nextSlide=currentSlide.next();
var currentDot=$('.active-dot');
var nextDot=currentDot.next();
if (nextSlide.length == 0) {
nextSlide=$('.slide').first();
nextDot=$('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
//Previous Arrow Click Functionality
$('.arrow-prev').click(function() {
var currentSlide=$('.active-slide');
var prevSlide=currentSlide.prev();
var currentDot=$('.active-dot');
var prevDot=currentDot.prev();
if(prevSlide.length == 0) {
prevSlide=$('.slide').last();
prevDot=$('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
//Load Jumbotron text on page open.
$("#test h1").addClass("load");
};
$(document).ready(main);

You need to add e.preventDefault(); to your onlick functions
Check the fiddle
EDIT
As I just commented in the comment section it is the href="#" that is causing the page to the jump to the top. So technically if you remove the achor tag the e.preventDefault(); is not necessary. But it is good to keep it.

Add a parameter (e) to your click callback functions then prevent default post (that an anchor tag with href set has) with this line:
e.preventDefault();
like this:
//Next Arrow Functionality
$('.arrow-next').click(function (e) {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nextSlide.length == 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
e.preventDefault();
});
//Previous Arrow Click Functionality
$('.arrow-prev').click(function (e) {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length == 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
e.preventDefault();
});