Slide na pagina inicial

Detalhes da questão

Endereço do fórum: testealrpg.forumeiros.com
Versão do fórum: PunBB

Descrição

Olá pessoal.
Queria um slide banner deste modelo : https://i.imgur.com/enjqeyR.png

Igual a esse forum : https://test.cllv.in/darklagoon/

Só que ao invés das setinhas quero apenas umas "Bolinhas" de tamanho médio uma do lado da outra
Se possível também queria que ficasse no banner do meu fórum, Ex: já tem o banner lá ai vai ficar tipo um slide passando com outros banners da mesma dimensão e onde está o banner lá, entenderam?

Seria possível fazer? Desde já agradeço

Olá,

• Vá em Painel de controle › Visualização › Imagens e Cores › Cores › Folha de estilo CSS e adicione o seguinte código ao final da caixa de texto:
  

  Código:

  .unslider {
    position: relative;
    overflow: hidden;
}

.unslider-nav {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    text-align: center;
}

• Vá em Painel de controle › Módulos › HTML & JavaScript › Gestão dos códigos JavaScripts › Criar um novo JavaScript e adicione esse código com Investimento em Todas as páginas:
  

  Código:

  ; (function ($) {
    'use strict';

    var slides, list, styles;

    slides = [{
        image: 'https://i.imgur.com/EljhHzF.png',
        link: 'http://testealrpg.forumeiros.com'
    }, {
        image: 'https://i.imgur.com/EljhHzF.png',
        link: 'http://testealrpg.forumeiros.com'
    }, {
        image: 'https://i.imgur.com/EljhHzF.png',
        link: 'http://testealrpg.forumeiros.com'
    }];

    styles = [
        'http://cdn.rawgit.com/idiot/unslider/master/dist/css/unslider.css',
        'http://cdn.rawgit.com/idiot/unslider/master/dist/css/unslider-dots.css'
    ];

    list = $('<ul>');

    $(function () {
        $.each(styles, function (key, style) {
            $('<link>', {
                rel: 'stylesheet',
                href: style
            }).appendTo('head');
        });

        $.getScript('http://cdn.rawgit.com/idiot/unslider/master/dist/js/unslider-min.js', function () {

            $.each(slides, function (key, slide) {
                var item, link;

                if (typeof slide.image !== 'undefined') {
                    item = $('<img>', {
                        src: slide.image
                    });
                }

                if (typeof slide.link !== 'undefined') {
                    link = $('<a>', {
                        href: slide.link,
                        html: typeof item !== 'undefined' ? item.prop('outerHTML') : ''
                    });
                }

                $('<li>', {
                    html: typeof link !== 'undefined' ? link.prop('outerHTML') : item.prop('outerHTML')
                }).appendTo(list);
            })
           
            $('#branding')
                .html('')
                .append(list)               
                .unslider({
                    arrows: false
                });
        });
    });
})(jQuery);

  
  Você pode configurar quais serão os slides nessa parte do script:
  
  

  Código:

  slides = [{
    image: 'https://i.imgur.com/EljhHzF.png',
    link: 'http://testealrpg.forumeiros.com'
}, {
    image: 'https://i.imgur.com/EljhHzF.png',
    link: 'http://testealrpg.forumeiros.com'
}, {
    image: 'https://i.imgur.com/EljhHzF.png',
    link: 'http://testealrpg.forumeiros.com'
}];

  
  Sendo image a URL da imagem do slide e link a URL do link do slide.

^-^

Não resultou, amigo.

Olá autor,

Veja esses tópicos: https://ajuda.forumeiros.com/t72893-code-html-slide-de-imagens#498392
https://ajuda.forumeiros.com/t69709-pfv-me-passem-um-codigo-desse-slide-de-top#475589de-top

Algum lhe foi útil?
Até mais.

while escreveu:Olá autor,

Veja esses tópicos: https://ajuda.forumeiros.com/t72893-code-html-slide-de-imagens#498392
https://ajuda.forumeiros.com/t69709-pfv-me-passem-um-codigo-desse-slide-de-top#475589de-top

Algum lhe foi útil?
Até mais.

Se pelo que vi não é bem isso que quero, While, seria mais pro meu banner mesmo mais tipo o desse : https://ajuda.forumeiros.com/t69709-pfv-me-passem-um-codigo-desse-slide-de-top#475589de-top

só que no meu banner, teria como ?

Poderia me passar o código do seu template overall_header por gentileza?

O template se encontra em:

Painel de Controle -> Visualização -> Templates -> Geral

Mande-me o código dentro da tag [code] aqui no tópico. OBS: Somente a conta /u1 tem acesso aos templates.

Fico no aguardo,
Até mais.

iScroll escreveu:Não resultou, amigo.

Erro meu, perdão. Esqueci um ; no código.

Tente trocar o Javascript por esse:

Código:

; (function ($) {
    'use strict';

    var slides, list, styles;

    slides = [{
        image: 'https://i.imgur.com/EljhHzF.png',
        link: 'http://testealrpg.forumeiros.com'
    }, {
        image: 'https://i.imgur.com/EljhHzF.png',
        link: 'http://testealrpg.forumeiros.com'
    }, {
        image: 'https://i.imgur.com/EljhHzF.png',
        link: 'http://testealrpg.forumeiros.com'
    }];

    styles = [
        'http://cdn.rawgit.com/idiot/unslider/master/dist/css/unslider.css',
        'http://cdn.rawgit.com/idiot/unslider/master/dist/css/unslider-dots.css'
    ];

    list = $('<ul>');

    $(function () {
        $.each(styles, function (key, style) {
            $('<link>', {
                rel: 'stylesheet',
                href: style
            }).appendTo('head');
        });

        $.getScript('http://cdn.rawgit.com/idiot/unslider/master/dist/js/unslider-min.js', function () {

            $.each(slides, function (key, slide) {
                var item, link;

                if (typeof slide.image !== 'undefined') {
                    item = $('<img>', {
                        src: slide.image
                    });
                }

                if (typeof slide.link !== 'undefined') {
                    link = $('<a>', {
                        href: slide.link,
                        html: typeof item !== 'undefined' ? item.prop('outerHTML') : ''
                    });
                }

                $('<li>', {
                    html: typeof link !== 'undefined' ? link.prop('outerHTML') : item.prop('outerHTML')
                }).appendTo(list);
            });
           
            $('#branding')
                .html('')
                .append(list)               
                .unslider({
                    arrows: false
                });
        });
    });
})(jQuery);

Isso mesmo Kyo, mais seria possível deixar as bolinhas na lateral direita ? e passar automaticamente num tempo de 8 segundos ?

while escreveu:Poderia me passar o código do seu template overall_header por gentileza?

O template se encontra em:

Painel de Controle -> Visualização -> Templates -> Geral

Mande-me o código dentro da tag [code] aqui no tópico. OBS: Somente a conta /u1 tem acesso aos templates.

Fico no aguardo,
Até mais.

Obrigado amigo, mais parece que o Kyo já resolveu o que eu queria kk, só falta alguns detalhes.

Adicione ao CSS:

Código:

.unslider-nav ol {
    text-align: right;
    padding-right: 20px;
}

E troque o código Javascript por esse:

Código:

; (function ($) {
    'use strict';
 
    var slides, list, styles;
 
    slides = [{
        image: 'http://i.imgur.com/EljhHzF.png',
        link: 'http://testealrpg.forumeiros.com'
    }, {
        image: 'http://i.imgur.com/EljhHzF.png',
        link: 'http://testealrpg.forumeiros.com'
    }, {
        image: 'http://i.imgur.com/EljhHzF.png',
        link: 'http://testealrpg.forumeiros.com'
    }];
 
    styles = [
        'http://cdn.rawgit.com/idiot/unslider/master/dist/css/unslider.css',
        'http://cdn.rawgit.com/idiot/unslider/master/dist/css/unslider-dots.css'
    ];
 
    list = $('<ul>');
 
    $(function () {
        $.each(styles, function (key, style) {
            $('<link>', {
                rel: 'stylesheet',
                href: style
            }).appendTo('head');
        });
 
        $.getScript('http://cdn.rawgit.com/idiot/unslider/master/dist/js/unslider-min.js', function () {
 
            $.each(slides, function (key, slide) {
                var item, link;
 
                if (typeof slide.image !== 'undefined') {
                    item = $('<img>', {
                        src: slide.image
                    });
                }
 
                if (typeof slide.link !== 'undefined') {
                    link = $('<a>', {
                        href: slide.link,
                        html: typeof item !== 'undefined' ? item.prop('outerHTML') : ''
                    });
                }
 
                $('<li>', {
                    html: typeof link !== 'undefined' ? link.prop('outerHTML') : item.prop('outerHTML')
                }).appendTo(list);
            });
           
            $('#branding')
                .html('')
                .append(list)               
                .unslider({
                    arrows: false,
                    autoplay: true,
                    delay: 8000
                });
        });
    });
})(jQuery);

^-^

Certo, resolveu a questão de passar automaticamente mais não está aquelas bolinhas no lado direito, seria possível aumentar elas apenas um pouco?

Troque o CSS que te passei anteriormente por esse:

Código:

.unslider-nav ol {
    text-align: right !important;
    padding-right: 20px !important;
}

.unslider-nav li {
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    color: transparent !important;
}

^-^

Não resultou, dessa vez sumiu as bolinhas...

Pelo que vi no CSS, o senhor acabou por remover uma peça adicional do código. Mas tudo bem, adicione esse código ao CSS:

Código:

.unslider {
    overflow: hidden !important;
}

.unslider-nav {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    text-align: center;
}

Uma hora nós acertamos. Desculpe os tropeços até o momento. >-<"

Relaxa man kkk, acontece, pior eu que não consegui nem a metade que tu ta fazendo por mim... Desde já agradeço...

Enfim, ainda não resultou nada, as bolinhas sumiram

Quase lá. Adicione mais essa peça ao CSS:

Código:

.unslider {
    position: relative !important;
}

^-^

Caraca mano!! Simplesmente Pika!! TKS... Te agradeço de coração, se um dia precisar de algo só chamar hehe