carrousel, tamanho da imagem no CSS
AJUDA...
Segue exemplo de carrousel.
Feito em Jquery, CSS, e html.
1) O mesmo funciona, porém o CSS não tem opção para aumentar o tamanho da imagem, segue código:
<section class="container-fluid parallax parallax_shadow">
<div class="row">
<div id="mn_clientes" class="col-lg-12 col-md-12 col-sm-6">
<h4 class="text-left space_top10" style="">
TExto do Carrousel
</h4>
<div class="row">
<div class="carrousel_padrao">
<ul class="carrousel_padrao__slides">
<li class="item"><img src="../site/img.jpg"></li>
<li class="item"><img src="../site/img.jpg"></li>
<li class="item"><img src="../site/img.jpg"></li>
</ul>
<div class="carrousel_padrao__arrow carrousel_padrao__arrow--left space_top40">
<span class="fa fa-arrow-left font_24px"></span>
</div>
<div class="carrousel_padrao__arrow carrousel_padrao__arrow--right space_top40">
<span class="fa fa-arrow-right font_24px"></span>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$(document).ready(function() {
'use strict';
var carousel = function carousel(options) {
var _carousel = {
paused: false,
stopped: false,
options: {
speed: 3000,
acceleration: 5,
reverse: false,
selector: '.carrousel_padrao',
slidesSelector: '.carrousel_padrao__slides',
leftArrowSelector: '.carrousel_padrao__arrow--left',
rightArrowSelector: '.carrousel_padrao__arrow--right'
},
init: function init() {
var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
// Copy options to this.options
for (var prop in options) {
if (!options.hasOwnProperty(prop)) break;
this.options[prop] = options[prop];
}
// Cache nodes
var carousel = document.querySelector(options.selector || this.options.selector);
var slides = this._slides = carousel.querySelector(this.options.slidesSelector);
this._leftArrow = carousel.querySelector(this.options.leftArrowSelector);
this._rightArrow = carousel.querySelector(this.options.rightArrowSelector);
// Multiply speed value by the number of slides
this.options.speed = this.options.speed * slides.children.length;
// Set slides container width
this.width = slides.offsetWidth;
// Repeat elements
slides.innerHTML = slides.innerHTML + slides.innerHTML + slides.innerHTML;
this._registerEvents();
this._animate();
},
_registerEvents: function _registerEvents() {
var _this = this;
var speed = this.options.speed;
var reverse = this.options.reverse;
this._rightArrow.addEventListener('mouseover', function() {
_this.options.speed = speed / _this.options.acceleration;
_this.options.reverse = false;
});
this._rightArrow.addEventListener('mouseleave', function() {
_this.options.speed = speed;
_this.options.reverse = reverse;
});
this._leftArrow.addEventListener('mouseover', function() {
_this.options.speed = speed / _this.options.acceleration;
_this.options.reverse = true;
});
this._leftArrow.addEventListener('mouseleave', function() {
_this.options.speed = speed;
_this.options.reverse = reverse;
});
// Pause when cursor is over carousel
this._slides.addEventListener('mouseover', this.pause.bind(this));
this._slides.addEventListener('mouseleave', this.start.bind(this));
// Pause when cursor is over carousel
window.addEventListener('resize', function() {
_this.width = _this._slides.offsetWidth;
});
},
pause: function pause() {
this.paused = true;
},
start: function start() {
this.paused = false;
},
stop: function stop() {
this.stopped = true;
},
_animate: function _animate() {
var _this2 = this;
var slides = this._slides;
var oneThird = slides.lastElementChild.getBoundingClientRect().right / 3;
var framesCount = 0;
var step = 0;
var posX = 0;
var animate = function animate() {
if (!_this2.paused) {
framesCount = _this2.options.speed * 60 / 1000;
step = oneThird / framesCount;
posX += _this2.options.reverse ? step : -step;
slides.style.transform = 'translateX(' + posX + 'px)';
if (_this2.options.reverse) {
if (posX >= _this2.width - oneThird) {
posX = _this2.width - oneThird * 2;
}
} else {
if (Math.abs(posX) >= oneThird * 2) {
posX = -oneThird;
}
}
}!_this2.stopped && requestAnimationFrame(animate);
};
animate();
}
};
_carousel.init(options);
return _carousel;
};
window.onload = function() {
return carousel({
selector: '.carrousel_padrao'
});
};
});</script>
CSS:
.carrousel_padrao {
width: 100%;
position: relative;
margin-top: 20px;
}
.carrousel_padrao__slides {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0;
padding: 0;
height: auto;
list-style: none;
will-change: transform;
}
/*
.carrousel_padrao .carrousel_padrao__slides > .item > img,
.carrousel_padrao .carrousel_padrao__slides > .item > a > img {
display: block;
width: 100%;
height: auto;
}*/
.carrousel_padrao__arrow {
width: 30px;
height: 30px;
position: absolute;
top: 70%;
z-index: 1;
-webkit-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
background-color: white;
}
.carrousel_padrao__arrow--left {
left: 15px;
cursor: pointer;
background-color: #ff9326;
border-radius: 30px;
color: #ff9326;
/*
-webkit-box-shadow: 0px 0px 8px -1px rgba(171, 171, 171, 1);
-moz-box-shadow: 0px 0px 8px -1px rgba(171, 171, 171, 1);
box-shadow: 0px 0px 8px -1px rgba(171, 171, 171, 1);
*/
}
.carrousel_padrao__arrow--right {
right: 15px;
cursor: pointer;
background-color: #ff9326;
border-radius: 30px;
color: #ff9326;
/*
-webkit-box-shadow: 0px 0px 8px -1px rgba(171, 171, 171, 1);
-moz-box-shadow: 0px 0px 8px -1px rgba(171, 171, 171, 1);
box-shadow: 0px 0px 8px -1px rgba(171, 171, 171, 1);
*/
}
.carrousel_padrao__arrow--right:hover,
.carrousel_padrao__arrow--left:hover {
transition: 1s ease;
-webkit-transition: all 100ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 100ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 100ms ease-in;
-moz-transform: scale(1.5);
transition: all 100ms ease-in;
transform: scale(1.5);
}
Estou com problemas no CODIGO acima, na parte que está comentado no CSS.
Tentei inserir aquele código para acertar o tamanho da mensagem, mas não vai....
SUGESTÕES:::????
Obrigado.Discussão (5)
Carregando comentários...