Fórum dos Fóruns

Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Adicionar botões no slide

3 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery

Ir para baixo

Tópico resolvido Adicionar botões no slide

Mensagem por APOllO 30.09.17 19:55

Detalhes da questão


Endereço do fórum: http://ismaels.forumeiros.com/
Versão do fórum: PunBB

Descrição


Olá!

Queria adicionar botões nos slides do meu fórum como os desse site: https://www.mercadolivre.com.br/

Adicionar botões no slide ZJylzmB
APOllO
APOllO
Super Membro

Membro desde : 08/12/2014
Mensagens : 1104
Pontos : 1529

http://suportedesign.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar botões no slide

Mensagem por Luiz 02.10.17 16:38

Qual o código JavaScript e HTML que está usando atualmente?
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar botões no slide

Mensagem por IsmaelS. 02.10.17 23:30

Os códigos que estão a ser utilizados são:

.CSS:
Código:
#pun-head #pun-navlinks {
    margin-bottom: 0;
}
#pun-head + .owl-carousel {
    margin: 0 calc(-1% - 5px);
    width: auto;
}

.overall_header:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
  <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
  <meta http-equiv="content-script-type" content="text/javascript" />
  <meta http-equiv="content-style-type" content="text/css" />
  <!-- BEGIN switch_compat_meta -->
  <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
  <!-- END switch_compat_meta -->
  <!-- BEGIN switch_canonical_url -->
  <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
  <!-- END switch_canonical_url -->
  {META_FAVICO}
  {META}
  {META_FB_LIKE}
  <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
  {T_HEAD_STYLESHEET}
  {CSS}
  <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
  <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  <!-- BEGIN switch_recent_jquery -->
  <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
  <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
  <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
  <!-- END switch_recent_jquery -->
  <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
  {RICH_SNIPPET_GOOGLE}
  <!-- BEGIN switch_fb_login -->
  <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
  <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
  <!-- END switch_fb_login -->
  <!-- BEGIN switch_ticker -->
  <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
  <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
  <!-- END switch_ticker -->
  <!-- BEGIN switch_ticker_new -->
  <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
  <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});
     
      switch( tickerDirParam )
      {
        case 'top' :
            slid_vert = true;
            break;
     
        case 'left':
            break;
     
        case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;
     
        case 'right':
            auto_dir = 'prev';
            break;
     
        default:
            slid_vert = true;
      }
     
      $(document).ready(function() {
     
        var width_max = $('ul#fa_ticker_content').width();
        var width_item = Math.floor(width_max / {switch_ticker.SIZE});
     
        if (width_max > 0)
        {
            $('#fa_ticker_content').css('display','block');
     
            $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
              if ($(this).width() > width_item)
              {
              var ratio      = $(this).width() / width_item;
              var new_height = Math.round($(this).height() / ratio);
              $(this).height(new_height).width(width_item);
              }
            });
     
            if (slid_vert)
            {
              var height_max = h_perso;
     
              $('ul#fa_ticker_content li').each( function () {
                  if ($(this).height() > height_max)
                  {
                    height_max = $(this).height();
                  }
              } );
     
              $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
              $('ul#fa_ticker_content li').height(height_max);
            }
     
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
              wrap: 'circular',
              auto: {switch_ticker.STOP_TIME},
              auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
        }
        else
        {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
        }
      });
      //]]>
  </script>
  <!-- END switch_ticker_new -->
  <script type="text/javascript">
      //<![CDATA[
      jQuery().ready(function(){
        <!-- BEGIN switch_enable_pm_popup -->
            pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
            if(pm != null) { pm.focus(); }
        <!-- END switch_enable_pm_popup -->
        <!-- BEGIN switch_report_popup -->
            report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
            if(report != null) { report.focus(); }
        <!-- END switch_report_popup -->
        <!-- BEGIN switch_ticker -->
            $(window).load(function() {           
              Ticker.start({
                  height : {switch_ticker.HEIGHT},
                  spacing : {switch_ticker.SPACING},
                  speed : {switch_ticker.SPEED},
                  direction : '{switch_ticker.DIRECTION}',
                  pause : {switch_ticker.STOP_TIME}
              });
            });
        <!-- END switch_ticker -->
      });
     
      <!-- BEGIN switch_login_popup -->
        var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = false;
      <!-- END switch_login_popup -->
     
      <!-- BEGIN switch_login_popup -->
      $(document).ready( function() {
        $(window).resize(function() {
            var windowWidth = document.documentElement.clientWidth;
            var popupWidth = $("#login_popup").width();
            var mypopup = $("#login_popup");
     
            $("#login_popup").css({
            "left": windowWidth/2 - popupWidth/2
              });
        });
      });
      <!-- END switch_login_popup -->
      //]]>
  </script>
  {GREETING_POPUP}
  <!-- BEGIN switch_ticker_new -->
  <style>
      .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
      }
      .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
      }
      .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
      }
  </style>
  <!-- END switch_ticker_new -->
  {HOSTING_JS}
  <!-- BEGIN google_analytics_code -->
  <script type="text/javascript">
      //<![CDATA[
      var _gaq = _gaq || [];
      _gaq.push(["_setAccount", "{G_ANALYTICS_ID}"]);
      _gaq.push(["_trackPageview"]);
      _gaq.push(['_trackPageLoadTime']);
     
      <!-- BEGIN google_analytics_code_bis -->
      _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
      _gaq.push(['b._trackPageview']);
      <!-- END google_analytics_code_bis -->
     
      (function() {
        var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
        ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
        var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
      })();
      //]]>
  </script>
  <!-- END google_analytics_code -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
</head>
<body>
  <!-- BEGIN hitskin_preview -->
  <div id="hitskin_preview" style="display: block;">
      <h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
      <div class="content">
        <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
        </p>
      </div>
  </div>
  <!-- END hitskin_preview -->
  <!-- BEGIN switch_login_popup -->
  <div id="login_popup" class="module main" style="z-index: 10000 !important;">
      <div id="login_popup_title" class="main-head">
        <div class="h3">{SITENAME}</div>
      </div>
      <div class="main-content">
        {LOGIN_POPUP_MSG}
        <div id="login_popup_buttons">
            <form action="{S_LOGIN_ACTION}" method="get">
              <input type="submit" class="button2" value="{L_LOGIN}" />
              <input type="button" class="button2" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
              <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
            </form>
        </div>
      </div>
  </div>
  <!-- END switch_login_popup -->
  <a id="top" name="top" accesskey="t"></a>
  <div class="minwidth_IE">
      <div class="layout_IE">
        <div class="container_IE">
            <div class="pun">
              <div id="pun-intro" class="clearfix">
                  <a href="{U_INDEX}" id="pun-logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
                  <!-- BEGIN switch_h1 -->
                  <div id="pun-title">{switch_h1.MAIN_SITENAME}</div>
                  <!-- END switch_h1 -->
                  <!-- BEGIN switch_desc -->
                  <p id="pun-desc">{switch_desc.SITE_DESCRIPTION}</p>
                  <!-- END switch_desc -->
                  <div id="search-box">
                    <form method="get" action="/search?search_where=11" id="search">
                        <p class="nomargin"><input type="text" name="search_keywords" id="keywords" maxlength="128" class="inputbox search" placeholder="Buscar..." autocomplete="off"><input class="button2" type="submit" value="Buscar"></p>
                    </form>
                  </div>
              </div>
              <div id="pun-head">
                  <div id="pun-navlinks">
                    <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                    </ul>
                  </div>
              </div>
          <div class="owl-carousel owl-theme">
                <div> <img src="https://cdn1.bigcommerce.com/server3200/ldrtd7/content/img/RBUK-Logo.svg" /></div>
                <div> <img src="http://i.imgur.com/IzqDtQU.png" /> </div>
                <div> <img src="http://i.imgur.com/IzqDtQU.png" /> </div>
                <div> <img src="http://i.imgur.com/IzqDtQU.png" /> </div>
                <div> <img src="http://i.imgur.com/IzqDtQU.png" /> </div>
                <div> <img src="http://i.imgur.com/IzqDtQU.png" /> </div>
                <div> <img src="http://i.imgur.com/IzqDtQU.png" /> </div>
              </div>
          <script>
            $(function(){
$(".owl-carousel").owlCarousel({
  singleItem: true,
  items: 1,
  autoplay: true,
  autoplayTimeout: 5000,
  autoplayHoverPause: true,
  loop: true
});
                });
            </script>
              <!-- BEGIN switch_ticker_new -->
              <div id="fa_ticker_block" style="padding-top:4px;">
                  <div class="module main">
                    <div class="main-content clearfix">
                        <div id="fa_ticker_container">
                          <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display: none;width: 100%;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                          </ul>
                        </div>
                    </div>
                  </div>
              </div>
              <!-- END switch_ticker_new -->
              <!-- BEGIN switch_ticker -->
              <div id="fa_ticker_block" style="padding-top:4px;">
                  <div class="module main">
                    <div class="main-content clearfix">
                        <div id="fa_ticker_container">
                          <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                <!-- BEGIN ticker_row -->
                                <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                <!-- END ticker_row -->
                              </div>
                          </div>
                        </div>
                    </div>
                  </div>
              </div>
              <!-- END switch_ticker -->
              <div id="page-body">
                  <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                    <div id="outer-wrapper">
                        <div id="wrapper">
                          <div id="container">
                              <div id="content">
                                <div id="{ID_LEFT}">
                                    <!-- BEGIN giefmod_index1 -->
                                    {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                    <!-- END giefmod_index1 -->
                                </div>
                                <div id="main">
                                    <div id="main-content">
                                      <!-- BEGIN html_validation -->
                                    </div>
                                </div>
                              </div>
                          </div>
                        </div>
                    </div>
                  </div>
              </div>
            </div>
        </div>
      </div>
  </div>
</body>
</html>
<!-- END html_validation -->
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar botões no slide

Mensagem por Luiz 02.10.17 23:40

Perdão se pareci pouco específico.
Me referi ao HTML e JavaScript do slider. Envergonhado
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar botões no slide

Mensagem por IsmaelS. 02.10.17 23:48

Ups erro meu desculpe, esta aqui o HTML junto com o .jS:
Código:
      <div class="owl-carousel owl-theme">
                <div> <img src="https://cdn1.bigcommerce.com/server3200/ldrtd7/content/img/RBUK-Logo.svg" /></div>
                <div> <img src="http://i.imgur.com/IzqDtQU.png" /> </div>
                <div> <img src="http://i.imgur.com/IzqDtQU.png" /> </div>
                <div> <img src="http://i.imgur.com/IzqDtQU.png" /> </div>
                <div> <img src="http://i.imgur.com/IzqDtQU.png" /> </div>
                <div> <img src="http://i.imgur.com/IzqDtQU.png" /> </div>
                <div> <img src="http://i.imgur.com/IzqDtQU.png" /> </div>
              </div>
          <script>
            $(function(){
$(".owl-carousel").owlCarousel({
  singleItem: true,
  items: 1,
  autoplay: true,
  autoplayTimeout: 5000,
  autoplayHoverPause: true,
  loop: true
});
                });
            </script>
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar botões no slide

Mensagem por Luiz 02.10.17 23:54

Sem problemas.
Troque por este para que possamos acertar os estilos:
Código:
<div class="owl-carousel-wrapper">
  <div id="owl-controller-prev">
    <i class="fa fa-chevron-left"></i>
  </div>
  <div class="owl-carousel owl-theme">
    <div><img src="https://cdn1.bigcommerce.com/server3200/ldrtd7/content/img/RBUK-Logo.svg" /></div>
    <div><img src="http://i.imgur.com/IzqDtQU.png" /> </div>
    <div><img src="http://i.imgur.com/IzqDtQU.png" /> </div>
    <div><img src="http://i.imgur.com/IzqDtQU.png" /> </div>
    <div><img src="http://i.imgur.com/IzqDtQU.png" /> </div>
    <div><img src="http://i.imgur.com/IzqDtQU.png" /> </div>
    <div><img src="http://i.imgur.com/IzqDtQU.png" /> </div>
  </div>
  <div id="owl-controller-next">
    <i class="fa fa-chevron-right"></i>
  </div>
</div>
<script>
(function ($) {
  'use strict';

  $(function(){
    $(".owl-carousel").owlCarousel({
      singleItem: true,
      items: 1,
      autoplay: true,
      autoplayTimeout: 5000,
      autoplayHoverPause: true,
      loop: true
    });

    $('#owl-controller-prev').on('click', function() {
      $owl.trigger('next.owl.carousel');
    });
   
    $('#owl-controller-prev').on('click', function() {
      $owl.trigger('prev.owl.carousel');
    });
  });
}(jQuery));
</script>

Piscada
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar botões no slide

Mensagem por IsmaelS. 02.10.17 23:57

Adicionado !
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar botões no slide

Mensagem por Luiz 02.10.17 23:58

Perdão, esqueci-me de declarar uma variável.
Troque novamente por este:
Código:
<div class="owl-carousel-wrapper">
  <div id="owl-controller-prev">
    <i class="fa fa-chevron-left"></i>
  </div>
  <div class="owl-carousel owl-theme">
    <div><img src="https://cdn1.bigcommerce.com/server3200/ldrtd7/content/img/RBUK-Logo.svg" /></div>
    <div><img src="http://i.imgur.com/IzqDtQU.png" /> </div>
    <div><img src="http://i.imgur.com/IzqDtQU.png" /> </div>
    <div><img src="http://i.imgur.com/IzqDtQU.png" /> </div>
    <div><img src="http://i.imgur.com/IzqDtQU.png" /> </div>
    <div><img src="http://i.imgur.com/IzqDtQU.png" /> </div>
    <div><img src="http://i.imgur.com/IzqDtQU.png" /> </div>
  </div>
  <div id="owl-controller-next">
    <i class="fa fa-chevron-right"></i>
  </div>
</div>
<script>
(function ($) {
  'use strict';
 
  $(function () {
    var $owl = $(".owl-carousel").owlCarousel({
      singleItem: true,
      items: 1,
      autoplay: true,
      autoplayTimeout: 5000,
      autoplayHoverPause: true,
      loop: true
    });
 
    $('#owl-controller-prev').on('click', function() {
      $owl.trigger('next.owl.carousel');
    });
   
    $('#owl-controller-prev').on('click', function() {
      $owl.trigger('prev.owl.carousel');
    });
  });
}(jQuery));
</script>

Feliz
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar botões no slide

Mensagem por IsmaelS. 03.10.17 0:04

Sem problema, foi adicionado.
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar botões no slide

Mensagem por Luiz 03.10.17 0:10

O senhor repetiu alguns trechos do código quando trocou:
-> http://prntscr.com/gsilp2

Troque tudo, mas somente que pertencer ao slide por:
Código:
<div class="owl-carousel-wrapper">
  <a id="owl-controller-prev">
    <i class="fa fa-chevron-left"></i>
  </a>
  <div class="owl-carousel owl-theme">
    <div><img src="https://cdn1.bigcommerce.com/server3200/ldrtd7/content/img/RBUK-Logo.svg" /></div>
    <div><img src="http://i.imgur.com/IzqDtQU.png" /> </div>
    <div><img src="http://i.imgur.com/IzqDtQU.png" /> </div>
    <div><img src="http://i.imgur.com/IzqDtQU.png" /> </div>
    <div><img src="http://i.imgur.com/IzqDtQU.png" /> </div>
    <div><img src="http://i.imgur.com/IzqDtQU.png" /> </div>
    <div><img src="http://i.imgur.com/IzqDtQU.png" /> </div>
  </div>
  <a id="owl-controller-next">
    <i class="fa fa-chevron-right"></i>
  </a>
</div>
<script>
(function ($) {
  'use strict';
 
  $(function () {
    var owl = $(".owl-carousel");
   
    owl.owlCarousel({
      singleItem: true,
      items: 1,
      autoplay: true,
      autoplayTimeout: 5000,
      autoplayHoverPause: true,
      loop: true
    });
 
    $('#owl-controller-next').on('click', function() {
      owl.trigger('next.owl.carousel');
      console.log('Próximo.');
    });
   
    $('#owl-controller-prev').on('click', function() {
      owl.trigger('prev.owl.carousel');
      console.log('Anterior.');
    });
  });
}(jQuery));
</script>
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar botões no slide

Mensagem por IsmaelS. 03.10.17 0:16

Erro meu acho que agora ficou.
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar botões no slide

Mensagem por Luiz 03.10.17 0:24

Adicione em seu CSS:
Código:
.owl-carousel-wrapper {
  position: relative;
}

.owl-carousel-wrapper > #owl-controller-prev,
.owl-carousel-wrapper > #owl-controller-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
  background-color: #fff;
  color: #555;
  cursor: pointer;
  font-size: 20px;
  padding: 30px 13px;
  transition: all linear 150ms;
}

.owl-carousel-wrapper > #owl-controller-prev:hover,
.owl-carousel-wrapper > #owl-controller-next:hover {
  background-color: #555;
  color: #fff;
}

.owl-carousel-wrapper > #owl-controller-prev {
  left: 0;
  border-radius: 0 30px 30px 0;
  padding-right: 25px;
}

.owl-carousel-wrapper > #owl-controller-next {
  right: 0;
  border-radius: 30px 0 0 30px;
  padding-left: 25px;
}

Feliz
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar botões no slide

Mensagem por IsmaelS. 03.10.17 0:30

Ficou perfeito, mas ao adicionar o código desta mensagem mexeu com o footer ou seja cortou as estatísticas.
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar botões no slide

Mensagem por Luiz 03.10.17 0:40

Adicione mais este código ao final de sua CSS:
Código:
.statistics {
  padding-bottom: 55px;
}
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar botões no slide

Mensagem por IsmaelS. 03.10.17 23:09

Resultou mas aparece esta barra branca:
Adicionar botões no slide Sem_ty16
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar botões no slide

Mensagem por Luiz 04.10.17 0:58

A barra branca é o espaço dos anúncios:
-> http://prntscr.com/gsykit

Provavelmente o senhor usa softwares como Adblocks para vetá-los, o que torna o espaço em branco.
Já saliento que esse espaço não pode ser violado e/ou alterado em nenhuma hipótese, exceto por meio de créditos.

o/
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar botões no slide

Mensagem por IsmaelS. 04.10.17 13:06

Sim tem razão nem me tinha lembrado disso, obrigado e resolvido!!
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar botões no slide

Mensagem por Luiz 04.10.17 16:16

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery

 
Permissões neste sub-fórum
Não podes responder a tópicos