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>
jQuery and CSS3 slideshow
javascript;jquery;html;css;css3
$(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 : #slideshow saved to the variable as compiler does not need to find multiple time it from DOM. This will improve performance.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.