[2.x] problème intégration twig et fullpage.js

Bonjour,

Je ne sais pas si je post au bon endroit, mais je dois faire un site responsive, j'utilise bootstrap, fullpage.js sur un projet symfony.

je rencontre un problème avec fullpage.js.

Dans un premier temps, j'ai une page avec un menu et plusieurs section. Dans ces sections, j'ai du contenue et des slides.
Dans mes slides, j'affiche 3 articles pour la version ecran, 2 pour la version tablette et 1 pour la version mobile

Et je pensais pouvoir utiliser les classes de bootstrap avec un visible-lg, hidden-md etc...
Mais en faisant cela, mon menu ne fonctionne plus, en effet lorsque j'affiche le code source de ma page je me retrouve avec tous les blocs qui ne devraient pas être visible. Donc ce qui fait que j'ai plusieurs foi le même id donc fullpage.js se perd complètement.

Donc comment faire pour supprimer du code en fonction de la taille de l'écran ?
j'avais pensé à faire une variable php que je rempli en js pour ensuite la renvoyer et faire des conditions en php mais je ne sais pas si ça se fait !

voici mon code côté twig:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{% extends '::base.html.twig' %}
{% block title %}{% endblock %}
{% block body %}
    {% include "BluewireHomeBundle:Includes:navbar.html.twig" %}
    <div id="fullpage">
        {% include "BluewireHomeBundle:Includes:accueil.html.twig" %}
        {% include "BluewireHomeBundle:Includes:solution.html.twig" %}
        <div class="visible-lg hidden-md hidden-xs">
            {% include "BluewireHomeBundle:Includes:techno-lg.html.twig" %}
            {% include "BluewireHomeBundle:Includes:success-lg.html.twig" %}
        </div>
        <div class="hidden-lg visible-md hidden-xs">
            {% include "BluewireHomeBundle:Includes:techno-md.html.twig" %}
            {% include "BluewireHomeBundle:Includes:success-md.html.twig" %}
        </div>
        <div class="hidden-lg hidden-md visible-xs">
            {% include "BluewireHomeBundle:Includes:techno-xs.html.twig" %}
            {% include "BluewireHomeBundle:Includes:success-xs.html.twig" %}
        </div>
        {% include "BluewireHomeBundle:Includes:contact.html.twig" %}
    </div>
{% endblock %}
{% block javascripts %}
    <script>
        $(document).ready(function(){
            $('#fullpage').fullpage({
                menu: '#top-menu',
                anchors: ['Accueil','Solutions' ,'Technologies', 'Success', 'Contact'],
                easingcss3: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',
                scrollingSpeed: 900,
                slidesNavigation: true,
                responsiveWidth: 900,
                responsiveHeight: 600
            });
        });
    </script>
{% endblock %}

et voici le code techno-lg.hmtl.twig

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<section class="section" id="section2">
    <div class="container">
        <h2>{{ 'techno.titre' | trans }}</h2>
        <div class="slide" id="slide1" data-anchor="slide1">
            {% include "BluewireHomeBundle:TechList:tech1.html.twig" %}
            {% include "BluewireHomeBundle:TechList:tech2.html.twig" %}
            {% include "BluewireHomeBundle:TechList:tech3.html.twig" %}
        </div>
        <div class="slide" id="slide2" data-anchor="slide2">
            {% include "BluewireHomeBundle:TechList:tech4.html.twig" %}
            {% include "BluewireHomeBundle:TechList:tech5.html.twig" %}
        </div>
    </div>
</section>