2
\$\begingroup\$

I have built a slideshow using jQuery and CSS3.

jQuery is used to trigger class changes (.slide1, .slide2 ...) on the slide container (#slideshow) and CSS3 is used to handle the transition animations between slides according to these classes.

My main concern is about the jQuery script. I feel it is very verbal as it is handling each case separatly. How could I make it more efficient, shorter and maintainable?

Here is the relevant code :

DEMO

$(document).ready(function() {
    var slideC 	= 1,
		slideR 	= 2,
		slideL 	= 4;

	$('#next').click(function(){
			$('#slideshow').removeClass('slide' + slideC).addClass('slide' + slideR);
			slideC = slideR;

			if (slideC == 1)	{slideL = 4;slideR = 2;}
			if (slideC == 2)	{slideL = 1;slideR = 3;}
			if (slideC == 3)	{slideL = 2;slideR = 4;}
			if (slideC == 4)	{slideL = 3;slideR = 1;}

			console.log('slide =' + slideC);
			console.log('slideR =' + slideR);
			console.log('slideL =' + slideL);

		});
		$('#prev').click(function(){
			$('#slideshow').removeClass('slide' + slideC).addClass('slide' + slideL);
			slideC = slideL;
			if (slideC == 1)	{slideL = 4;slideR = 2;}
			if (slideC == 2)	{slideL = 1;slideR = 3;}
			if (slideC == 3)	{slideL = 2;slideR = 4;}
			if (slideC == 4)	{slideL = 3;slideR = 1;}
			console.log('slideC =' + slideC);
			console.log('slideR =' + slideR);
			console.log('slideL =' + slideL);
		});
	$('#controls .bSlide1').click(function(){$('#slideshow').removeClass('slide' + slideC).addClass('slide1');
		slideC = 1; slideL = 4;slideR = 2;});
	$('#controls .bSlide2').click(function(){$('#slideshow').removeClass('slide' + slideC).addClass('slide2');
		slideC = 2; slideL = 1;slideR = 3;});
	$('#controls .bSlide3').click(function(){$('#slideshow').removeClass('slide' + slideC).addClass('slide3');
		slideC = 3; slideL = 2;slideR = 4;});
	$('#controls .bSlide4').click(function(){$('#slideshow').removeClass('slide' + slideC).addClass('slide4');
		slideC = 4; slideL = 3;slideR = 1;});
});
body{background:grey;}
#slideshow_wrap {
    position:relative;
    overflow:hidden;
}
#slideshow {
    width:400%;
}
#slideshow .slide {
    width:25%;
    float:left;
}
/** slideshow content **/
 #slideshow .client_img {
    position:relative;
    width:25%;
    padding-bottom:25%;
    float:left;
    margin-left:12.5%;
}
#slideshow .client_img img {
    position:absolute;
    width:90%;
    height:auto;
    left:5%;
    top:0;
}
#slideshow h3, #slideshow p {
    margin-left:50%;
    width:40%;
}
#slideshow .c_txt {
    padding:5% 0;
}

/** slideshow controls **/
 #slideshow_wrap button {
    background:none;
    border:none;
    outline:none;
    padding:0;
    margin:0;
    cursor:pointer;
}
#slideshow_wrap #prev, #slideshow_wrap #next {
    position:absolute;
    top:50%;
    width:27px;
    height:27px;
}
#slideshow_wrap #prev {
    left:0;
    border-top:4px solid #fff;
    border-left:4px solid #fff;
    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    transform:rotate(-45deg);
}
#slideshow_wrap #next {
    right:0;
    border-top:4px solid #fff;
    border-right:4px solid #fff;
    -webkit-transform-origin:100% 0;
    -ms-transform-origin:100% 0;
    transform-origin:100% 0;
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
}
#controls {
    text-align:center;
    margin-top:5%;
}
#controls button {
    width:15px;
    height:15px;
    border-radius:50%;
    background-color: rgba(255, 255, 255, 0.4);
    display:inline-block;
    margin:0 2px;
    -webkit-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
}
/** slideshow animation **/
 #slideshow {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
}
#slideshow.slide2 {
    -webkit-transform: translateX(-25%);
    -ms-transform: translateX(-25%);
    transform: translateX(-25%);
}
#slideshow.slide3 {
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
#slideshow.slide4 {
    -webkit-transform: translateX(-75%);
    -ms-transform: translateX(-75%);
    transform: translateX(-75%);
}
#slideshow.slide1 ~ #controls .bSlide1 {
    background-color:#fff;
}
#slideshow.slide2 ~ #controls .bSlide2 {
    background-color:#fff;
}
#slideshow.slide3 ~ #controls .bSlide3 {
    background-color:#fff;
}
#slideshow.slide4 ~ #controls .bSlide4 {
    background-color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow_wrap">
    <div id="slideshow" class="slide1">
        <div id="slide1" class="slide">
            <div class="client_img">
                <img src="http://lorempixel.com/output/people-q-g-300-280-1.jpg" alt="" />
            </div>
             <h3>Lorem ipsum dolor</h3>

            <p class="c_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium est eu enim hendrerit, nec cursus libero bibendum. Mauris elit turpis, ultricies sed odio sollicitudin, varius rhoncus erat. Morbi cursus feugiat arcu at efficitur. In nec vulputate erat. Integer laoreet neque nec neque imperdiet, quis luctus dolor consequat. Curabitur condimentum posuere purus, eget blandit est facilisis id. Donec pharetra tincidunt felis, in vehicula lacus imperdiet id.
            </p>
        </div>
        <div id="slide2" class="slide">
            <div class="client_img">
                <img src="http://lorempixel.com/output/people-q-g-300-280-6.jpg" alt="" />
            </div>
             <h3>Lorem ipsum dolor</h3>

            <p class="c_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium est eu enim hendrerit, nec cursus libero bibendum. Mauris elit turpis, ultricies sed odio sollicitudin, varius rhoncus erat. Morbi cursus feugiat arcu at efficitur. In nec vulputate erat. Integer laoreet neque nec neque imperdiet, quis luctus dolor consequat. Curabitur condimentum posuere purus, eget blandit est facilisis id. Donec pharetra tincidunt felis, in vehicula lacus imperdiet id.
            </p>
        </div>
        <div id="slide3" class="slide">
            <div class="client_img">
                <img src="http://lorempixel.com/output/people-q-g-300-280-9.jpg" alt="" />
            </div>
             <h3>Lorem ipsum dolor</h3>

            <p class="c_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium est eu enim hendrerit, nec cursus libero bibendum. Mauris elit turpis, ultricies sed odio sollicitudin, varius rhoncus erat. Morbi cursus feugiat arcu at efficitur. In nec vulputate erat. Integer laoreet neque nec neque imperdiet, quis luctus dolor consequat. Curabitur condimentum posuere purus, eget blandit est facilisis id. Donec pharetra tincidunt felis, in vehicula lacus imperdiet id.
            </p>
        </div>
        <div id="slide4" class="slide">
            <div class="client_img">
                <img src="http://lorempixel.com/output/people-q-g-300-280-8.jpg" alt="" />
            </div>
             <h3>Lorem ipsum dolor</h3>

            <p class="c_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium est eu enim hendrerit, nec cursus libero bibendum. Mauris elit turpis, ultricies sed odio sollicitudin, varius rhoncus erat. Morbi cursus feugiat arcu at efficitur. In nec vulputate erat. Integer laoreet neque nec neque imperdiet, quis luctus dolor consequat. Curabitur condimentum posuere purus, eget blandit est facilisis id. Donec pharetra tincidunt felis, in vehicula lacus imperdiet id.
            </p>
        </div>
    </div>
    <button id="prev"></button>
    <button id="next"></button>
    <div id="controls">
        <button class="bSlide1"></button>
        <button class="bSlide2"></button>
        <button class="bSlide3"></button>
        <button class="bSlide4"></button>
    </div>
</div>

\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$ 

$(document).ready(function() {
    var slideC 	= 1,
		slideR 	= 2,
		slideL 	= 4;
    var $Slideshow = $('#slideshow');
	$('#next').click(function(){
			$Slideshow.removeClass('slide' + slideC).addClass('slide' + slideR);
			slideC = slideR;

            switch(slideC){
                case 1 : 
                        slideL = 4;slideR = 2;
                        break;
                case 2 :
                        slideL = 1;slideR = 3;
                        break;
                case 3 :
                        slideL = 2;slideR = 4;
                        break;
                case 4 :
                        slideL = 3;slideR = 1;
            }

			console.log('slide =' + slideC);
			console.log('slideR =' + slideR);
			console.log('slideL =' + slideL);

		});
		$('#prev').click(function(){
			$Slideshow.removeClass('slide' + slideC).addClass('slide' + slideL);
			slideC = slideL;
		    alert(slideC);
            switch(slideC){
                case 1 : 
                        slideL = 4;slideR = 2;
                        break;
                case 2 :
                        slideL = 1;slideR = 3;
                        break;
                case 3 :
                        slideL = 2;slideR = 4;
                        break;
                case 4 :
                        slideL = 3;slideR = 1;
            }
			console.log('slideC =' + slideC);
			console.log('slideR =' + slideR);
			console.log('slideL =' + slideL);
		});
	$('#controls .bSlide1').click(function(){$Slideshow.removeClass('slide' + slideC).addClass('slide1');
		slideC = 1; slideL = 4;slideR = 2;});
	$('#controls .bSlide2').click(function(){$Slideshow.removeClass('slide' + slideC).addClass('slide2');
		slideC = 2; slideL = 1;slideR = 3;});
	$('#controls .bSlide3').click(function(){$Slideshow.removeClass('slide' + slideC).addClass('slide3');
		slideC = 3; slideL = 2;slideR = 4;});
	$('#controls .bSlide4').click(function(){$Slideshow.removeClass('slide' + slideC).addClass('slide4');
		slideC = 4; slideL = 3;slideR = 1;});
});
body{background:grey;}
#slideshow_wrap {
    position:relative;
    overflow:hidden;
}
#slideshow {
    width:400%;
}
#slideshow .slide {
    width:25%;
    float:left;
}
/** slideshow content **/
 #slideshow .client_img {
    position:relative;
    width:25%;
    padding-bottom:25%;
    float:left;
    margin-left:12.5%;
}
#slideshow .client_img img {
    position:absolute;
    width:90%;
    height:auto;
    left:5%;
    top:0;
}
#slideshow h3, #slideshow p {
    margin-left:50%;
    width:40%;
}
#slideshow .c_txt {
    padding:5% 0;
}

/** slideshow controls **/
 #slideshow_wrap button {
    background:none;
    border:none;
    outline:none;
    padding:0;
    margin:0;
    cursor:pointer;
}
#slideshow_wrap #prev, #slideshow_wrap #next {
    position:absolute;
    top:50%;
    width:27px;
    height:27px;
}
#slideshow_wrap #prev {
    left:0;
    border-top:4px solid #fff;
    border-left:4px solid #fff;
    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    transform:rotate(-45deg);
}
#slideshow_wrap #next {
    right:0;
    border-top:4px solid #fff;
    border-right:4px solid #fff;
    -webkit-transform-origin:100% 0;
    -ms-transform-origin:100% 0;
    transform-origin:100% 0;
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
}
#controls {
    text-align:center;
    margin-top:5%;
}
#controls button {
    width:15px;
    height:15px;
    border-radius:50%;
    background-color: rgba(255, 255, 255, 0.4);
    display:inline-block;
    margin:0 2px;
    -webkit-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
}
/** slideshow animation **/
 #slideshow {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
}
#slideshow.slide2 {
    -webkit-transform: translateX(-25%);
    -ms-transform: translateX(-25%);
    transform: translateX(-25%);
}
#slideshow.slide3 {
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
#slideshow.slide4 {
    -webkit-transform: translateX(-75%);
    -ms-transform: translateX(-75%);
    transform: translateX(-75%);
}
#slideshow.slide1 ~ #controls .bSlide1 {
    background-color:#fff;
}
#slideshow.slide2 ~ #controls .bSlide2 {
    background-color:#fff;
}
#slideshow.slide3 ~ #controls .bSlide3 {
    background-color:#fff;
}
#slideshow.slide4 ~ #controls .bSlide4 {
    background-color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow_wrap">
    <div id="slideshow" class="slide1">
        <div id="slide1" class="slide">
            <div class="client_img">
                <img src="http://lorempixel.com/output/people-q-g-300-280-1.jpg" alt="" />
            </div>
             <h3>Lorem ipsum dolor</h3>

            <p class="c_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium est eu enim hendrerit, nec cursus libero bibendum. Mauris elit turpis, ultricies sed odio sollicitudin, varius rhoncus erat. Morbi cursus feugiat arcu at efficitur. In nec vulputate erat. Integer laoreet neque nec neque imperdiet, quis luctus dolor consequat. Curabitur condimentum posuere purus, eget blandit est facilisis id. Donec pharetra tincidunt felis, in vehicula lacus imperdiet id.
            </p>
        </div>
        <div id="slide2" class="slide">
            <div class="client_img">
                <img src="http://lorempixel.com/output/people-q-g-300-280-6.jpg" alt="" />
            </div>
             <h3>Lorem ipsum dolor</h3>

            <p class="c_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium est eu enim hendrerit, nec cursus libero bibendum. Mauris elit turpis, ultricies sed odio sollicitudin, varius rhoncus erat. Morbi cursus feugiat arcu at efficitur. In nec vulputate erat. Integer laoreet neque nec neque imperdiet, quis luctus dolor consequat. Curabitur condimentum posuere purus, eget blandit est facilisis id. Donec pharetra tincidunt felis, in vehicula lacus imperdiet id.
            </p>
        </div>
        <div id="slide3" class="slide">
            <div class="client_img">
                <img src="http://lorempixel.com/output/people-q-g-300-280-9.jpg" alt="" />
            </div>
             <h3>Lorem ipsum dolor</h3>

            <p class="c_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium est eu enim hendrerit, nec cursus libero bibendum. Mauris elit turpis, ultricies sed odio sollicitudin, varius rhoncus erat. Morbi cursus feugiat arcu at efficitur. In nec vulputate erat. Integer laoreet neque nec neque imperdiet, quis luctus dolor consequat. Curabitur condimentum posuere purus, eget blandit est facilisis id. Donec pharetra tincidunt felis, in vehicula lacus imperdiet id.
            </p>
        </div>
        <div id="slide4" class="slide">
            <div class="client_img">
                <img src="http://lorempixel.com/output/people-q-g-300-280-8.jpg" alt="" />
            </div>
             <h3>Lorem ipsum dolor</h3>

            <p class="c_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium est eu enim hendrerit, nec cursus libero bibendum. Mauris elit turpis, ultricies sed odio sollicitudin, varius rhoncus erat. Morbi cursus feugiat arcu at efficitur. In nec vulputate erat. Integer laoreet neque nec neque imperdiet, quis luctus dolor consequat. Curabitur condimentum posuere purus, eget blandit est facilisis id. Donec pharetra tincidunt felis, in vehicula lacus imperdiet id.
            </p>
        </div>
    </div>
    <button id="prev"></button>
    <button id="next"></button>
    <div id="controls">
        <button class="bSlide1"></button>
        <button class="bSlide2"></button>
        <button class="bSlide3"></button>
        <button class="bSlide4"></button>
    </div>
</div>

Changes :

  1. #slideshow saved to the variable as compiler does not need to find multiple time it from DOM. This will improve performance.
  2. No need to check all the conditions as we found match with on condition we can exclude other condition to be match. This will also improve performance.
\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.