<div class="container-fluid">
            <div class="row">
                <div class="blogSlider">
                    <div class="col-md-3">
                        <div id="navigation" class="owl-carousel side">
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpgg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur... </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur... </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur... </p>
                                </a>
                            </div><div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur... </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur... </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur... </p>
                                </a>
                            </div><div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur... </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur... </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div><div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>





                        </div>
                    </div>


                    <div class="col-md-9">
                        <div id="slider" class="owl-carousel">


                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div><div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div><div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div><div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                            <div class="projectitem">
                                <a class="fancybox-effects-a" href="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" title="">
                                    <img src="http://www.btrade.com/wp-content/uploads/2013/01/slider-img-4.jpg" alt="" />
                                    <h1>Lorem Ipsum</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

body {
  background:#FFC107;
}

div.container-fluid {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
  margin-top:30px;
}
/*blog*/
.blogSlider {
    height: 410px;
    overflow: hidden;
}

 #navigation  img {
        width: 100% !important;
    }
#slider img {
    width: 100% !important;
    height: 333px;
    }

#navigation .owl-stage {
width: 262px !important;
    height: 389px!important;
    overflow-y: auto;
    overflow-x: hidden;
    height: -moz-calc(100% - (20px + 30px));
    height: -webkit-calc(100% - (20px + 30px));
    height: calc(100% - (20px + 30px));
    transform: translate3d(0px, 0px, 0px) !important;
}

#navigation .owl-stage::-webkit-scrollbar {
    width: 5px;
}
 
#navigation .owl-stage::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
#navigation .owl-stage::-webkit-scrollbar-thumb {
  background-color: #598527;
  outline: 1px solid slategrey;
  border-radius: 3px;
}


div.projectitem {
    background: #ebebeb;
}

div.projectitem h1 {
    font-size: 18px;
    color: #000000;
    padding: 4px 10px 4px 10px;
    margin: 0;
}
div.projectitem p {
    font-size: 13px;
    color: #000000;
    padding: 0 10px 13px 10px;

}
div.projectitem .btn {
    color: #000;
    border: 1px solid #000;
    border-radius: 17px;
    padding: 4px 14px;
    position: absolute;
    right: 14px;
    bottom: 14px;
    font-size: 12px;
    display: block;
}
div.projectitem .btn2 {
    color: #000;
    border: 1px solid #000;
    border-radius: 17px;
    padding: 4px 14px;
    position: absolute;
    right: 14px;
    bottom: 14px;
    font-size: 12px;
    display: block;
}
div.navigation div.projectitem {
        width: 257px;
}
   

$(document).ready(function () {
 

var sync1 = $("#slider");
	var sync2 = $("#navigation");
	
	var flag = false;
	
	var slides = sync1.owlCarousel({
		items:1,
		loop:true,
		margin:10,
		autoplay:true,
		autoplayTimeout:6000,
		autoplayHoverPause:false,
		nav: false,
		dots: true
	});
	var thumbs = sync2.owlCarousel({

		loop:false,
		margin:10,
		autoplay:false,
		nav: false,
		dots: false,responsiveClass: true,
        responsive: {
            0: {
                items: 1,
                nav: true
            },
            600: {
                items: 1,
                nav: false
            },
            1000: {
                items: 1,
                nav: true,
                loop: false,
                margin: 20
            }
        }
	}).on('click', '.owl-item', function(e) {
        e.preventDefault();	
        sync1.trigger('to.owl.carousel', [$(e.target).parents('.owl-item').index(), 300, true]);
	}).on('change.owl.carousel', function(e) {
                if (e.namespace && e.property.name === 'position' && !flag) {
                //nsole.log('...');
    }
	}).data('owl.carousel');

 // -----------------my script--------------------------------
  var all = $(".side .owl-stage .owl-item ").length;
  console.log(all);
  var height1 = $(".side .owl-stage .owl-item ").height();
  var height = $(".side .owl-stage .owl-item ").height() * 5;
  $(".side .owl-stage").css("height", height +"px");
  var syncposi = $(".side .owl-stage .active").index();
  console.log(syncposi);
  if (syncposi ==0) {
    $(".owl-prev").css({"pointer-events":"none", "opacity":0.3});
  }
  
  $(".owl-next").click(function(){
   var index = $(".side .owl-stage .active").index();
   if (index > 4 && index <=22) { 
    $('.side .owl-stage').animate({scrollTop:'+='+height1});

  }
  $(".owl-prev").css({"pointer-events":"auto", "opacity":1});
  if(index==0) {
    $('.side .owl-stage').scrollTop(0);
    console.log("hi");
  }
});
  $(".owl-prev").click(function(){
   var index = $(".side .owl-stage .active").index();
   if (index >5) {
    $('.side .owl-stage').animate({scrollTop:'-='+height1});
  }
  if (index <2) {
    $('.side .owl-stage').animate({scrollTop:'-='+height1*2});
  }

  if (index ==0) {
    $(".owl-prev").css({"pointer-events":"none", "opacity":0.3});
  }
});

  setInterval(function(){
    var syncposi = $(".side .owl-stage .active").index();
    if (syncposi ==0) {
      $(".owl-prev").css({"pointer-events":"none", "opacity":0.3});
    }
  },100);
  
  
  
  
  
    /*fancybox*/
    $('.fancybox').fancybox();


   
  
  
});