Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

marcelocardoso

carrousel, tamanho da imagem no CSS

Recommended Posts

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

ok...
oque pretendo fazer no código é, onde está comentado no código em CSS, que tentei usar é para definir um tamanho na imagem, espaçamento margin, padding nela, tem como???


tentei assim: mas não vai...
 

/*
.carrousel_padrao .carrousel_padrao__slides > .item > img,
.carrousel_padrao .carrousel_padrao__slides > .item > a > img {
    display: block;
    width: 100%;
    height: auto;
}
*/

se puder ajudar, agradeço sr. maujor...

Compartilhar este post


Link para o post
Compartilhar em outros sites

olá maujor...
conseguiste ver o tópico que postei por ultimo.

o meu problema neste carrousel, é simplesmente, DIMINUIR AS IMAGENS, não estou conseguindo pelas TAGS no CSS que comentei, tentei daquele jeito, mas não foi...

consegue dar uma luz.
obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Por Felipe Medeiros
      Bom, criei um tema filho e o que aprendi é que para alterar qualquer coisa do tema filho eu preciso copiar o arquivo do tema pai o colocar dentro da pasta do tema filho.
       
      No meu caso, estou usando o tema "Astra" bem famosinho. O arquivo css que quero modificar não está dentro da pasta do tema pai, está em "wp-content/uploads/uag-plugin/assets/0/uag-css-10.css" sendo que o diretorio do tema pai é "wp-content/themes/Astra"
       
      O problema é o seguinte, preciso modificar a barra de pesquisa da pagina inicial, porem o inspetor de elementos do chrome ta acusando que esse arquivo é o responsavel por estilizar a barra de pesquisa. Será que isso tem a ver com "Cache de objetos", eu sei que o plugin liteSpeed Cache, AMP, Rank Math, todos eles tem essas paradas de criar arquivos css e js para tornar o site mais rapido.
    • Por ILR master
      Salve galera.
       
      Vou publicar um evento e quero colocar um Cronômetro regressivo que mostre em tempo real os dias, horas e minutos que faltam para determinada data, tipo:.
      Faltam 5 dias, 12:30:00 para inauguração.
       
      Qdo chegar no dia, quero que apenas apareça uma mensagem.
       
      Alguém pode me ajudar?
    • Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.