CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sidney Sousa
Sidney Sousa

Reputation: 3584

How to set the height of box-slider

I have a slider(source code here) that currently has it's height set to 100%. However, I want the slider to have a height of 550px so it does not look too big, but am not managing to get that right for some reason. Below is the full code and running snippet:

(function(factory){
  
  if (typeof define === 'function' && define.amd) {
      define(['jquery'], factory);
  } else if (typeof exports !== 'undefined') {
      module.exports = factory(require('jquery'));
  } else {
      factory(jQuery);
  }

})(function($){
  
  var Zippy = (function(element, settings){
    
    var instanceUid = 0;
    
    function _Zippy(element, settings){
      this.defaults = {
        slideDuration: '3000',
        speed: 500,
        arrowRight: '.arrow-right',
        arrowLeft: '.arrow-left'
      };
      
  
      this.settings = $.extend({},this,this.defaults,settings);
      
      this.initials = {
        currSlide : 0,
        $currSlide: null,
        totalSlides : false,
        csstransitions: false
      };
      
   
      $.extend(this,this.initials);
      
      this.$el = $(element);
      
      this.changeSlide = $.proxy(this.changeSlide,this);
      
      this.init();
      
      this.instanceUid = instanceUid++;
    }
    
    return _Zippy;
  
  })();
  
   Zippy.prototype.init = function(){
    
    this.csstransitionsTest();
   
    this.$el.addClass('zippy-carousel');
    this.build();
    this.events();
    this.activate();
    this.initTimer();
  };

	Zippy.prototype.csstransitionsTest = function(){
		var elem = document.createElement('modernizr');

		var props = ["transition","WebkitTransition","MozTransition","OTransition","msTransition"];

		for ( var i in props ) {
			var prop = props[i];
			var result = elem.style[prop] !== undefined ? prop : false;
			if (result){
				this.csstransitions = result;
				break;
			} 
		} 
	};
	
	Zippy.prototype.addCSSDuration = function(){
		var _ = this;
		this.$el.find('.slide').each(function(){
			this.style[_.csstransitions+'Duration'] = _.settings.speed+'ms';
		});
	}
	
	Zippy.prototype.removeCSSDuration = function(){
		var _ = this;
		this.$el.find('.slide').each(function(){
			this.style[_.csstransitions+'Duration'] = '';
		});
	}
	 
	Zippy.prototype.build = function(){
		var $indicators = this.$el.append('<ul class="indicators" >').find('.indicators');
		this.totalSlides = this.$el.find('.slide').length;
		for(var i = 0; i < this.totalSlides; i++) $indicators.append('<li data-index='+i+'>');
	};
	 
	Zippy.prototype.activate = function(){
		this.$currSlide = this.$el.find('.slide').eq(0);
		this.$el.find('.indicators li').eq(0).addClass('active');
	};

	Zippy.prototype.events = function(){
		$('body')
			.on('click',this.settings.arrowRight,{direction:'right'},this.changeSlide)
			.on('click',this.settings.arrowLeft,{direction:'left'},this.changeSlide)
			.on('click','.indicators li',this.changeSlide);
	};
	
	Zippy.prototype.clearTimer = function(){
		if (this.timer) clearInterval(this.timer);
	};
	
	Zippy.prototype.initTimer = function(){
		this.timer = setInterval(this.changeSlide, this.settings.slideDuration);
	};
	
	Zippy.prototype.startTimer = function(){
		this.initTimer();
		this.throttle = false;
	};
	
	Zippy.prototype.changeSlide = function(e){e
		if (this.throttle) return;
		this.throttle = true;
		
		this.clearTimer();
		
		var direction = this._direction(e);
		
		var animate = this._next(e,direction);
		if (!animate) return;
	
		var $nextSlide = this.$el.find('.slide').eq(this.currSlide).addClass(direction + ' active');
		
    if (!this.csstransitions){
			this._jsAnimation($nextSlide,direction);
		} else {
			this._cssAnimation($nextSlide,direction);
		}
	};
	
	Zippy.prototype._direction = function(e){
		var direction;
		
		// Default to forward movement
		if (typeof e !== 'undefined'){
			direction = (typeof e.data === 'undefined' ? 'right' : e.data.direction);
		} else {
			direction = 'right';
		}
		return direction;
	};
	
	Zippy.prototype._next = function(e,direction){
		
		var index = (typeof e !== 'undefined' ? $(e.currentTarget).data('index') : undefined);
				
		switch(true){
			
       case( typeof index !== 'undefined'):
				if (this.currSlide == index){
					this.startTimer();
					return false;
				} 
				this.currSlide = index;
			break;
			case(direction == 'right' && this.currSlide < (this.totalSlides - 1)):
				this.currSlide++;
			break;
			case(direction == 'right'):
				this.currSlide = 0;
			break;
			case(direction == 'left' && this.currSlide === 0):
				this.currSlide = (this.totalSlides - 1);
			break;
			case(direction == 'left'):
				this.currSlide--;
			break;
		}
		return true;
	};
	
	Zippy.prototype._cssAnimation = function($nextSlide,direction){
		setTimeout(function(){
			this.$el.addClass('transition');
			this.addCSSDuration();
			this.$currSlide.addClass('shift-'+direction);
		}.bind(this),100);

		setTimeout(function(){
			this.$el.removeClass('transition');
			this.removeCSSDuration();
			this.$currSlide.removeClass('active shift-left shift-right');
			this.$currSlide = $nextSlide.removeClass(direction);
			this._updateIndicators();
			this.startTimer();
		}.bind(this),100 + this.settings.speed);
	};
	
	Zippy.prototype._jsAnimation = function($nextSlide,direction){		
		var _ = this;
		
		if(direction == 'right') _.$currSlide.addClass('js-reset-left');
		
     	var animation = {};
		animation[direction] = '0%';
		
		var animationPrev = {};
		animationPrev[direction] = '100%';
		
		this.$currSlide.animate(animationPrev,this.settings.speed);
		
		$nextSlide.animate(animation,this.settings.speed,'swing',function(){
			
			_.$currSlide.removeClass('active js-reset-left').attr('style','');
			
			_.$currSlide = $nextSlide.removeClass(direction).attr('style','');
			_._updateIndicators();
			_.startTimer();
		});
	};
	
	Zippy.prototype._updateIndicators = function(){
		this.$el.find('.indicators li').removeClass('active').eq(this.currSlide).addClass('active');
	};
	
	$.fn.Zippy = function(options){
    
    return this.each(function(index,el){
      
      el.Zippy = new Zippy(el,options);
      
    });
    
  };
 
});

var args = {
	arrowRight : '.arrow-right', 
	arrowLeft : '.arrow-left', 
	speed : 1000, 
	slideDuration : 4000
};

$('.carousel').Zippy(args);
(function(factory){
  
  if (typeof define === 'function' && define.amd) {
      define(['jquery'], factory);
  } else if (typeof exports !== 'undefined') {
      module.exports = factory(require('jquery'));
  } else {
      factory(jQuery);
  }

})(function($){
  
  var Zippy = (function(element, settings){
    
    var instanceUid = 0;
    
    function _Zippy(element, settings){
      this.defaults = {
        slideDuration: '3000',
        speed: 500,
        arrowRight: '.arrow-right',
        arrowLeft: '.arrow-left'
      };
      
  
      this.settings = $.extend({},this,this.defaults,settings);
      
      this.initials = {
        currSlide : 0,
        $currSlide: null,
        totalSlides : false,
        csstransitions: false
      };
      
   
      $.extend(this,this.initials);
      
      this.$el = $(element);
      
      this.changeSlide = $.proxy(this.changeSlide,this);
      
      this.init();
      
      this.instanceUid = instanceUid++;
    }
    
    return _Zippy;
  
  })();
  
   Zippy.prototype.init = function(){
    
    this.csstransitionsTest();
   
    this.$el.addClass('zippy-carousel');
    this.build();
    this.events();
    this.activate();
    this.initTimer();
  };

	Zippy.prototype.csstransitionsTest = function(){
		var elem = document.createElement('modernizr');

		var props = ["transition","WebkitTransition","MozTransition","OTransition","msTransition"];

		for ( var i in props ) {
			var prop = props[i];
			var result = elem.style[prop] !== undefined ? prop : false;
			if (result){
				this.csstransitions = result;
				break;
			} 
		} 
	};
	
	Zippy.prototype.addCSSDuration = function(){
		var _ = this;
		this.$el.find('.slide').each(function(){
			this.style[_.csstransitions+'Duration'] = _.settings.speed+'ms';
		});
	}
	
	Zippy.prototype.removeCSSDuration = function(){
		var _ = this;
		this.$el.find('.slide').each(function(){
			this.style[_.csstransitions+'Duration'] = '';
		});
	}
	 
	Zippy.prototype.build = function(){
		var $indicators = this.$el.append('<ul class="indicators" >').find('.indicators');
		this.totalSlides = this.$el.find('.slide').length;
		for(var i = 0; i < this.totalSlides; i++) $indicators.append('<li data-index='+i+'>');
	};
	 
	Zippy.prototype.activate = function(){
		this.$currSlide = this.$el.find('.slide').eq(0);
		this.$el.find('.indicators li').eq(0).addClass('active');
	};

	Zippy.prototype.events = function(){
		$('body')
			.on('click',this.settings.arrowRight,{direction:'right'},this.changeSlide)
			.on('click',this.settings.arrowLeft,{direction:'left'},this.changeSlide)
			.on('click','.indicators li',this.changeSlide);
	};
	
	Zippy.prototype.clearTimer = function(){
		if (this.timer) clearInterval(this.timer);
	};
	
	Zippy.prototype.initTimer = function(){
		this.timer = setInterval(this.changeSlide, this.settings.slideDuration);
	};
	
	Zippy.prototype.startTimer = function(){
		this.initTimer();
		this.throttle = false;
	};
	
	Zippy.prototype.changeSlide = function(e){e
		if (this.throttle) return;
		this.throttle = true;
		
		this.clearTimer();
		
		var direction = this._direction(e);
		
		var animate = this._next(e,direction);
		if (!animate) return;
	
		var $nextSlide = this.$el.find('.slide').eq(this.currSlide).addClass(direction + ' active');
		
    if (!this.csstransitions){
			this._jsAnimation($nextSlide,direction);
		} else {
			this._cssAnimation($nextSlide,direction);
		}
	};
	
	Zippy.prototype._direction = function(e){
		var direction;
		
		// Default to forward movement
		if (typeof e !== 'undefined'){
			direction = (typeof e.data === 'undefined' ? 'right' : e.data.direction);
		} else {
			direction = 'right';
		}
		return direction;
	};
	
	Zippy.prototype._next = function(e,direction){
		
		var index = (typeof e !== 'undefined' ? $(e.currentTarget).data('index') : undefined);
				
		switch(true){
			
       case( typeof index !== 'undefined'):
				if (this.currSlide == index){
					this.startTimer();
					return false;
				} 
				this.currSlide = index;
			break;
			case(direction == 'right' && this.currSlide < (this.totalSlides - 1)):
				this.currSlide++;
			break;
			case(direction == 'right'):
				this.currSlide = 0;
			break;
			case(direction == 'left' && this.currSlide === 0):
				this.currSlide = (this.totalSlides - 1);
			break;
			case(direction == 'left'):
				this.currSlide--;
			break;
		}
		return true;
	};
	
	Zippy.prototype._cssAnimation = function($nextSlide,direction){
		setTimeout(function(){
			this.$el.addClass('transition');
			this.addCSSDuration();
			this.$currSlide.addClass('shift-'+direction);
		}.bind(this),100);

		setTimeout(function(){
			this.$el.removeClass('transition');
			this.removeCSSDuration();
			this.$currSlide.removeClass('active shift-left shift-right');
			this.$currSlide = $nextSlide.removeClass(direction);
			this._updateIndicators();
			this.startTimer();
		}.bind(this),100 + this.settings.speed);
	};
	
	Zippy.prototype._jsAnimation = function($nextSlide,direction){		
		var _ = this;
		
		if(direction == 'right') _.$currSlide.addClass('js-reset-left');
		
     	var animation = {};
		animation[direction] = '0%';
		
		var animationPrev = {};
		animationPrev[direction] = '100%';
		
		this.$currSlide.animate(animationPrev,this.settings.speed);
		
		$nextSlide.animate(animation,this.settings.speed,'swing',function(){
			
			_.$currSlide.removeClass('active js-reset-left').attr('style','');
			
			_.$currSlide = $nextSlide.removeClass(direction).attr('style','');
			_._updateIndicators();
			_.startTimer();
		});
	};
	
	Zippy.prototype._updateIndicators = function(){
		this.$el.find('.indicators li').removeClass('active').eq(this.currSlide).addClass('active');
	};
	
	$.fn.Zippy = function(options){
    
    return this.each(function(index,el){
      
      el.Zippy = new Zippy(el,options);
      
    });
    
  };
  

});

var args = {
	arrowRight : '.arrow-right', 
	arrowLeft : '.arrow-left', 
	speed : 1000, 
	slideDuration : 4000
};

$('.carousel').Zippy(args);
<div class="wrapper">
  <div class="carousel">
    <div class="inner">
      <div class="slide active">
        <div class="slide-box">
          <h1>1</h1>
          <h2>Heading 2</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.</p>
          <a href="#" class="btn btn-primary"></a>
        </div>
      </div>
      <div class="slide">
        <div class="slide-box">
          <h1>2</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.</p>
          <a href="#" class="btn btn-primary"></a>
        </div>
      </div>
      <div class="slide">
        <div class="slide-box">
          <h1>3</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.</p>
          <a href="#" class="btn btn-primary"></a>
        </div>
      </div>
    </div>
    <div class="arrow arrow-left"></div>
    <div class="arrow arrow-right"></div>
  </div>

</div>

I tried giving a height of 500px to the wrapper class but it does not seem to be the best way.

How can I adjust the height of the slider and also keep the content in the middle of the box when I resize the page?

Here mycodepen if needed

Thank you in advance

Upvotes: 0

Views: 1158

Answers (1)

Alessandro_Russo
Alessandro_Russo

Reputation: 2211

The padding in the slide style give problems with height:

.slide {
    text-align: center;
    padding-top: 25%;
    background-size: cover;
}

This is my fix to your style to get the right height, I also centered horizontally and vertically the slide-box and the text:

/********For better see the text********/
p{
  color:white;
}

h2{
  color:white;
}    
/**************************************/

.wrapper{
  width:100%;
  position:relative;
  height: 50px;
}
.slide-box {
    max-width: 1300px;
    margin: 0 auto;
    padding: 54px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
/**
 * Padding is set relative to the width
 * of the element, so here padding-top:60% is
 * a percentage of the width. This allows us 
 * to set the height as a ratio of the width
 *
 */
.carousel{
width: 100%;
height: 500px;
position: relative;
/* padding-top: 50%; */
overflow: hidden;
}

.inner{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
}

/**
 * ==========================
 * Animation styles
 * 
 * Notes:
 * 1. We use z-index to position active slides in-front 
 * of non-active slides
 * 2. We set right:0 and left:0 on .slide to provide us with
 * a default positioning on both sides of the slide. This allows 
 * us to trigger JS and CSS3 animations easily
 *
 */
.slide{
    width: 100%;
    height: 500px;
    position: absolute;
    top:0;
    right:0;
    left:0;
    z-index: 1;
    opacity: 0;
}

.slide.active,
.slide.left,
.slide.right{
    z-index: 2;
    opacity: 1;
}

/**
 * ==========================
 * JS animation styles
 * 
 * We use jQuery.animate to control the sliding animations
 * when CSS3 animations are not available. In order for
 * the next slide to slide in from the right, we need
 * to change the left:0 property of the slide to left:auto
 *
 */

.js-reset-left{left:auto}

/**
 * ==========================
 * CSS animation styles
 * 
 * .slide.left and .slide.right set-up
 * the to-be-animated slide so that it can slide
 * into view. For example, a slide that is about 
 * to slide in from the right will:
 * 1. Be positioned to the right of the viewport (right:-100%)
 * 2. Slide in when the style is superseded with a more specific style (right:0%)
 *
 */
.slide.left{
    left:-100%;
    right:0;
}

.slide.right{
    right:-100%;
    left: auto;
}

.transition .slide.left{left:0%}
.transition .slide.right{right:0%}

/**
 * The following classes slide the previously active
 * slide out of view before positioning behind the 
 * currently active slide
 *
 */
.transition .slide.shift-right{right: 100%;left:auto}
.transition .slide.shift-left{left: 100%;right:auto}

/**
 * This sets the CSS properties that will animate. We set the
 * transition-duration property dynamically via JS.
 * We use the browser's default transition-timing-function
 * for simplicity's sake
 * 
 * It is important to note that we are using CodePen's inbuilt
 * CSS3 property prefixer. For your own projects, you will need
 * to prefix the transition and transform properties here to ensure
 * reliable support across browsers
 *
 */
.transition .slide{
    transition-property: right, left, margin;
}

/**
 * ==========================
 * Indicators
 *
 */
.indicators{
  width:100%;
  position: absolute;
  bottom:0;
  z-index: 4;
  padding:0;
  text-align: center;
}

.indicators li{
    width: 13px;
    height: 13px;
    display: inline-block;
    margin: 5px;
    background: #fff;
    list-style-type: none;
    border-radius: 50%;
  cursor:pointer;
  transition:background 0.3s ease-out;
}

.indicators li.active{background:#93278f}

.indicators li:hover{background-color:#2b2b2b}

/**
 * ==========================
 * Arrows 
 *
 */
.arrow{
  width: 20px;
  height: 20px;
  position:absolute;
  top:50%;
  z-index:5;
  border-top:3px solid #fff;
  border-right:3px solid #fff;
  cursor:pointer;
  transition:border-color 0.3s ease-out;
}

.arrow:hover{border-color:#93278f}

.arrow-left{
  left:20px;
  transform:rotate(225deg);
}

.arrow-right{
  right:20px;
  transform:rotate(45deg);
}

/**
 * ==========================
 * For demo purposes only
 * 
 * Please note that the styles below are used
 * for the purposes of this demo only. There is no need
 * to use these in any of your own projects
 *
 */
.slide{
    text-align:left;
  background-size:cover;
  display: table-cell;
  vertical-align: middle;
}

h1{
    width:100px;
  height:100px;
  background-color:rgba(146, 45, 141,0.7);
    margin:auto;
  line-height:100px;
    color:#fff;
    font-size:2.4em;
  border-radius:50%;
  text-align: center;
}

.slide:nth-child(1){
    background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/163697/slide-1.jpg);
 }

.slide:nth-child(2){
    background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/163697/slide-2.jpg);
}

.slide:nth-child(3){
    background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/163697/slide-3.jpg);
 }

Upvotes: 0

Related Questions