Slide na pagina inicial

3 participantes

Ir para baixo

Tópico resolvido Slide na pagina inicial

Mensagem por iScroll 04.11.16 18:17

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
iScroll
iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Slide na pagina inicial

Mensagem por Kyo Panda 04.11.16 20:56

Olá,

  • Vá em Painel de controleVisualizaçãoImagens e CoresCoresFolha 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 controleMódulosHTML & JavaScriptGestão dos códigos JavaScriptsCriar 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.


^-^
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Slide na pagina inicial

Mensagem por iScroll 05.11.16 0:09

Não resultou, amigo.
iScroll
iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Slide na pagina inicial

Mensagem por while 05.11.16 1:14

while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Slide na pagina inicial

Mensagem por iScroll 05.11.16 1:19


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 ?
iScroll
iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Slide na pagina inicial

Mensagem por while 05.11.16 1:29

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.
while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Slide na pagina inicial

Mensagem por Kyo Panda 05.11.16 1:34

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);
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Slide na pagina inicial

Mensagem por iScroll 05.11.16 17:59

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.
iScroll
iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Slide na pagina inicial

Mensagem por Kyo Panda 05.11.16 20:09

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);

^-^

Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Slide na pagina inicial

Mensagem por iScroll 05.11.16 20:15

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?
iScroll
iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Slide na pagina inicial

Mensagem por Kyo Panda 05.11.16 20:23

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;
}

^-^
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Slide na pagina inicial

Mensagem por iScroll 05.11.16 20:36

Não resultou, dessa vez sumiu as bolinhas...
iScroll
iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Slide na pagina inicial

Mensagem por Kyo Panda 05.11.16 20:43

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. >-<"
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Slide na pagina inicial

Mensagem por iScroll 05.11.16 20:58

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
iScroll
iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Slide na pagina inicial

Mensagem por Kyo Panda 05.11.16 21:00

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

Código:
.unslider {
    position: relative !important;
}

^-^
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Slide na pagina inicial

Mensagem por iScroll 05.11.16 21:07

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

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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