Slider ändern

Gehe zu Seite:

Geschlossen

Do. 14.03.2019 21:21 Uhr #1

TomTom81 Mitglied

Registriert seit
05.03.2019

Beiträge
6

Beitragswertungen

Kann ich den slider im Header ändern so das die Bilder reingezoomt werden zb. ?

Habe das Design schlicht in schwarz/blau gehalten doch im Forum wird noch der weisse hintergrund angezeigt .

Muss ich das auch in der css ändern oder doch wo anders ?

MFG
Tom

verwendete ilch Version: 2.1.x

betroffene Homepage: tomsurlaub.de
0 Mitglieder finden den Beitrag gut.
- zitieren
Do. 14.03.2019 22:19 Uhr #2

Slipi Hall Of Fame

Registriert seit
19.01.2018

Beiträge
954

Beitragswertungen

Ja, dies wäre die forum.css. Diese findest du unter application/modules/forum/static/css

Slipi

slipi.at/
1 Mitglieder finden den Beitrag gut.
- zitieren
Fr. 15.03.2019 04:20 Uhr #3

TomTom81 Mitglied

Registriert seit
05.03.2019

Beiträge
6

Beitragswertungen

Super danke
0 Mitglieder finden den Beitrag gut.
- zitieren
Fr. 15.03.2019 16:30 Uhr #4

wiesenflieger Mitglied

Registriert seit
03.12.2017

Beiträge
205

Beitragswertungen

Zitat geschrieben von TomTom81
Kann ich den slider im Header ändern so das die Bilder reingezoomt werden zb. ?

Das würde mich auch Brennend interesieren ob das geht.
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 16.03.2019 08:08 Uhr #5

Baujahr73 gelöschter User

Guten Morgen,

meint Ihr sowas !?

bootsnipp.com/snippets/Q04Om
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 16.03.2019 10:45 Uhr #6

wiesenflieger Mitglied

Registriert seit
03.12.2017

Beiträge
205

Beitragswertungen

ja genau das meinte ich
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 16.03.2019 11:41 Uhr #7

Baujahr73 gelöschter User

@Slipi,

wollte mal deine Seite besuchen, aber bekomme die Meldung das diese nicht Sicher ist.

Schade, wollte eigentlich mal was bei Dir bestellen!
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 16.03.2019 11:52 Uhr #8

wiesenflieger Mitglied

Registriert seit
03.12.2017

Beiträge
205

Beitragswertungen

Ach was die seite ist sicher
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 16.03.2019 12:51 Uhr #9

Slipi Hall Of Fame

Registriert seit
19.01.2018

Beiträge
954

Beitragswertungen

Zitat geschrieben von Baujahr73
@Slipi,

wollte mal deine Seite besuchen, aber bekomme die Meldung das diese nicht Sicher ist.

Schade, wollte eigentlich mal was bei Dir bestellen!

Zertifikat ist drauf und auch aktuell. Werde mir ansehen was da sein kann, danke für die Info, aber meine Seite ist sicher.

Slipi

slipi.at/
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 16.03.2019 13:33 Uhr #10

wiesenflieger Mitglied

Registriert seit
03.12.2017

Beiträge
205

Beitragswertungen

ok und was ist jetzt mit dem slider. Es gibt doch bestimmt eine möglichkeit wo ich das umstellen kann zum beispiel fade in oder fade out oder sehe ich das falsch

Zuletzt modifiziert von wiesenflieger am 16.03.2019 - 13:33:53
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 16.03.2019 14:41 Uhr #11

M.vittel Mitglied

Registriert seit
16.11.2018

Beiträge
330

Beitragswertungen

Wenn ich das richtig sehe ist der Code doch dabei für PHP und CSS klicke mal oben rechts.

RealLife ... das ist doch das Game mit der geilen Grafik und der scheiss Story
0 Mitglieder finden den Beitrag gut.
- zitieren

Sa. 16.03.2019 14:51 Uhr #12

Baujahr73 gelöschter User

Zitat geschrieben von wiesenflieger

ok und was ist jetzt mit dem slider. Es gibt doch bestimmt eine möglichkeit wo ich das umstellen kann zum beispiel fade in oder fade out oder sehe ich das falsch

Benutzt Du ein eigenes Design, oder hast Du das Standard Design angepasst?

Beim Standard Design einfach den Code vom alten Slider mit diesem austauschen.

<div class="container">
                <div class="gaming">
                    <div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
   
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
  
 
    <div class="item active">
      <img src="https://images.unsplash.com/photo-1445280471656-618bf9abcfe0?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" alt="Chania"  width="100%">
    </div>
    
      <div class="item ">
      <img src="https://images.unsplash.com/photo-1419064642531-e575728395f2?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" alt="Chania"  width="100%">
    </div>

    <div class="item">
      <img src="https://images.unsplash.com/photo-1445280471656-618bf9abcfe0?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" alt="Flower" width="100%">
    </div>

  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

In die style.css am besten ganz unten dann den css Teil einfügen.

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(1.5, 1.5);
  }
}

@keyframes zoom {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.5, 1.5);
  }
}

.carousel-inner .item > img {
  -webkit-animation: zoom 20s;
  animation: zoom 20s;
}

Zuletzt modifiziert von Baujahr73 am 16.03.2019 - 14:58:16

0 Mitglieder finden den Beitrag gut.

zitieren

Sa. 16.03.2019 14:53 Uhr #13

Baujahr73 gelöschter User

Zitat geschrieben von Slipi
[quote=Baujahr73]@Slipi,

wollte mal deine Seite besuchen, aber bekomme die Meldung das diese nicht Sicher ist.

Schade, wollte eigentlich mal was bei Dir bestellen!

Zertifikat ist drauf und auch aktuell. Werde mir ansehen was da sein kann, danke für die Info, aber meine Seite ist sicher.

Vielleicht spinnt auch nur meine Sicherheitssoftware!
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 16.03.2019 16:45 Uhr #14

wiesenflieger Mitglied

Registriert seit
03.12.2017

Beiträge
205

Beitragswertungen

Hey cool danke passt. Habe allerdings nur den css teil genommen, nach dem Link für das Bild habe ich das alt="Chania" alt="Chania" zugefügt und das funzt auch
1 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 16.03.2019 20:36 Uhr #15

M.vittel Mitglied

Registriert seit
16.11.2018

Beiträge
330

Beitragswertungen

Haste Gut gemacht, passt gut bei dir in den Header.

RealLife ... das ist doch das Game mit der geilen Grafik und der scheiss Story
0 Mitglieder finden den Beitrag gut.
- zitieren
So. 17.03.2019 12:01 Uhr #16

wiesenflieger Mitglied

Registriert seit
03.12.2017

Beiträge
205

Beitragswertungen

Ja finde ich auch. Der Bildübergang stört noch etwas aber egal.
0 Mitglieder finden den Beitrag gut.
- zitieren
Fr. 22.03.2019 18:20 Uhr #17

Slipi Hall Of Fame

Registriert seit
19.01.2018

Beiträge
954

Beitragswertungen

Werde mir das WE das ganze mal ansehen, so das die Bilder sich nicht rein Slidern, sondern wie auf meiner Seite "Support Bereich".

Slipi

slipi.at/
0 Mitglieder finden den Beitrag gut.
- zitieren
Fr. 22.03.2019 20:53 Uhr #18

wiesenflieger Mitglied

Registriert seit
03.12.2017

Beiträge
205

Beitragswertungen

wow klasse. Die pfeile können auch weg
0 Mitglieder finden den Beitrag gut.
- zitieren

So. 24.03.2019 13:17 Uhr #19

Slipi Hall Of Fame

Hab da eine Idee wegen dem Wechsel der Grafiken.

!!!!!Wichtig vorher ein Backup durchführen!!!!

Layout index.php, bitte zwischen </nav> und </header> diese Zeillen einfügen damit die Slider Navigation nicht mehr angezeigt wird.

<div class="container">
        <div class="gaming">
           <div id="carousel-generic" class="carousel slide carousel-fade" data-ride="carousel">
             <div class="carousel-inner" role="listbox">
                <div class="item active">
                  <img src="<?=$this->getLayoutUrl('img/slider/slider_1.jpg') ?>" alt="Slider 1">
                </div>
                <div class="item">
                   <img src="<?=$this->getLayoutUrl('img/slider/slider_2.jpg') ?>" alt="Slider 2">
                </div>
                <div class="item">
                  <img src="<?=$this->getLayoutUrl('img/slider/slider_3.jpg') ?>" alt="Slider 2">
                </div>
               </div>
              </div>
             </div>
            </div>

Sollte die Slider Navigation erhalten bleiben, füge die class="carousel fade" hinzu

<div id="carousel-generic" class="carousel slide carousel-fade" data-ride="carousel">

Die Index ist fertig, jetzt kommt die style.css, dazu füge dies in deiner style.css ein

.carousel-inner {
  height: 100%;
}

/*-- Zoom efekt Anfang--*/

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(1.5, 1.5);
  }
}

@keyframes zoom {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.5, 1.5);
  }
}

.carousel-inner .item  {
  -webkit-animation: zoom 20s;
  animation: zoom 20s;
}

/*-- Zoom efekt ende--*/

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

Habe die änderungen auf meiner Demo Seite eingefühgt working.sd-sdesign.at/

Zuletzt modifiziert von Slipi am 24.03.2019 - 13:19:41

slipi.at/

0 Mitglieder finden den Beitrag gut.

zitieren

So. 24.03.2019 19:55 Uhr #20

wiesenflieger Mitglied

Registriert seit
03.12.2017

Beiträge
205

Beitragswertungen

Danke Slipi für die Mühe, funzt super
0 Mitglieder finden den Beitrag gut.
- zitieren
So. 24.03.2019 20:31 Uhr #21

Slipi Hall Of Fame

Registriert seit
19.01.2018

Beiträge
954

Beitragswertungen

Aber der übergang fehlt bei dir, oder hast dies ausgelassen?

Slipi

slipi.at/
0 Mitglieder finden den Beitrag gut.
- zitieren
So. 24.03.2019 20:56 Uhr #22

wiesenflieger Mitglied

Registriert seit
03.12.2017

Beiträge
205

Beitragswertungen

Zitat geschrieben von Slipi
Aber der übergang fehlt bei dir, oder hast dies ausgelassen?

Slipi

hmm verstehe nicht was gemeint ist, der slider läuft doch flüssig
0 Mitglieder finden den Beitrag gut.
- zitieren
So. 24.03.2019 21:06 Uhr #23

Slipi Hall Of Fame

Registriert seit
19.01.2018

Beiträge
954

Beitragswertungen

Musste meine Chache leeren, jetzt sehe ich es.

Slipi

slipi.at/
0 Mitglieder finden den Beitrag gut.
- zitieren

Geschlossen

	Zurück zu Allgemein

Beitrag zur Merkliste hinzufügen

ilch Forum » Ilch CMS 2.X » Allgemein » Slider ändern