Change Slick carousel horizontal arrows to Up and & down arrows with font-awesome arrows

Question

I have vertical photo sliding carousel ( using slick ) in my website. I want to change the default arrows of the slick which are pointing left and right and want to add up and down arrows. I did it using JS. prevArrow: $('.prev'), nextArrow: $('.next').

Want nav arrows to attach to the top and bottom in all sizes of the card above the slider

Codepen Link

$('.slick', '.vertical-slider').slick({
  vertical: true,
  verticalSwiping: true,
  autoplay: true,
  autoplaySpeed: 5000,
  slidesToShow: 4,
  slidesToScroll: 1,

  prevArrow: $('.prev'),
  nextArrow: $('.next')



});

.row {
  height: 423px;
}

.map {
  background-color: blue;
}

.des {
  background-color: #88206d;
}

.image-slide {
  background-color: #88206d;
}

.slick-slide img {
  width: 100%;
}

.vertical-slider {
  padding-right: 0 !important;
  height: 100%;
}

.slick img {
  box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.5);
}

.image-nav {
  z-index: 1;
  cursor: pointer;
}

.nav-height {
  height: 423px;
}

.slick .slick-prev::before {
  /*   content: url(https://i.stack.imgur.com/NEpWE.png); */
}

.slick .slick-next::before {
  /*   content: url(https://i.stack.imgur.com/dBFSB.png); */
}

.slick-prev,
.slick-next {
  /* position: static!important;
  width: auto!important;
  height: auto!important; */
  /*   left:31%!important; */
}

.slick-prev {
  /*   top:0!important; */
}

.slick-next {
  /*   top:100%!important; */
}









  

    
      Map
    

    

      

      
        
          
          
        
      



      
        

          
          
            
          

          
            
          

          
            
          

          
            
          

          
            
          

        
      

    
    
      Description

user_2333214 · Answer

You can rotate the pseudo elements with CSS transform like this:

.slick .slick-prev::before,
.slick .slick-next::before {
  display: block;
  transform: rotate(90deg);
}

$('.slick', '.vertical-slider').slick({
  vertical: true,
  verticalSwiping: true,
  autoplay: true,
  autoplaySpeed: 5000,
  slidesToShow: 4,
  slidesToScroll: 1,
  responsive: [{
    breakpoint: 992,
    settings: {
      slidesToShow: 3,
      slidesToScroll: 1
    }
  }]
});

.row {
  height: 423px;
}

.map {
  background-color: blue;
}

.des {
  background-color: red;
}

.image-slide {
  background-color: red;
}

.slick-slide img {
  width: 100%;
}

.vertical-slider {
  height: 100%;
  padding-right: 0 !important;
}

.slick img {
  box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.5);
}

.slick .slick-prev {
  background: url(/assets/img/nav/nav-try.svg) no-repeat scroll 15px -5px;
  left: -25px;
  padding: 24px;
}

.slick .slick-next {
  background: url(/assets/img/nav/nav-try.svg) no-repeat scroll -30px -5px;
  right: -28px;
  padding: 24px;
}

.slick .slick-prev::before,
.slick .slick-next::before {
  display: block;
  transform: rotate(90deg);
}









  
  
    

      
        Map
      

      

        

        
          

            
            
              
            

            
              
            

            
              
            

            
              
            

            
              
            

          
        

      
      
        Description

Change Slick carousel horizontal arrows to Up and & down arrows with font-awesome arrows

1 Answers