Add Carousel in page - Githubissues

در این آموزش در مورد یک قطره از دریای Bootstrap-vue میپردازیم

<template>
  <div>
    <b-carousel id="carousel1"
                style="text-shadow: 1px 1px 2px #333;"
                controls
                indicators
                background="#ababab"
                :interval="4000"
                img-width="1024"
                img-height="480"
                v-model="slide"
                @sliding-start="onSlideStart"
                @sliding-end="onSlideEnd"
    >

      <!-- Text slides with image -->
      <b-carousel-slide caption="First slide"
                        text="Nulla vitae elit libero, a pharetra augue mollis interdum."
                        img-src="https://picsum.photos/1024/480/?image=52"
      ></b-carousel-slide>

      <!-- Slides with custom text -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
        <h1>Hello world!</h1>
      </b-carousel-slide>

      <!-- Slides with image only -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58">
      </b-carousel-slide>

      <!-- Slides with img slot -->
      <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
      <b-carousel-slide>
        <img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
             src="https://picsum.photos/1024/480/?image=55" alt="image slot">
      </b-carousel-slide>

      <!-- Slide with blank fluid image to maintain slide aspect ratio -->
      <b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          eros felis, tincidunt a tincidunt eget, convallis vel est. Ut pellentesque
          ut lacus vel interdum.
        </p>
      </b-carousel-slide>

    </b-carousel>

    <p class="mt-4">
      Slide #: {{ slide }}<br>
      Sliding: {{ sliding }}
    </p>

  </div>
</template>

<script>
export default {
  data () {
    return {
      slide: 0,
      sliding: null
    }
  },
  methods: {
    onSlideStart (slide) {
      this.sliding = true
    },
    onSlideEnd (slide) {
      this.sliding = false
    }
  }
}
</script>
<!-- carousel-1.vue -->

این را در فایل component بزارید و از آموزش #7 استفاده کنید

اما نکته ای که میخوام به این مقاله اضافه کنم در مورد دادن مسیر عکس در این template است

ساده ترین راه:

<b-carousel-slide :img-src="require('../assets/Carousel/1.jpg')" ></b-carousel-slide>

به قسمت img-src دقت کنید

برای مطالعه بیشتر به این آدرس مراجعه فرمایید:

https://bootstrap-vue.js.org/docs/reference/images/ همچنین قسمت Carousel: https://bootstrap-vue.js.org/docs/components/carousel/

برای مطابقت height عکس ها با صفحه مرورگر کاربر بدون داشتن اسکرول عمودی کد template را به این صورت تغییر میدهیم


<template>
  <div class="saeed-castel" >
    <b-carousel id="carousel1"
                style="text-shadow: 1px 1px 2px #333;"
                controls
                indicators
                background="#ababab"
                :interval="4000"
                v-model="slide"
                @sliding-start="onSlideStart"
                @sliding-end="onSlideEnd"
    >

      <b-carousel-slide :img-src="require('../assets/Carousel/1.jpg')" :style="{'height': deviceheight}" ></b-carousel-slide>

      <b-carousel-slide :img-src="require('../assets/Carousel/2.jpg')" :style="{'height': deviceheight}" ></b-carousel-slide>

      <b-carousel-slide :img-src="require('../assets/Carousel/3.jpg')" :style="{'height': deviceheight}" ></b-carousel-slide>

      <b-carousel-slide :img-src="require('../assets/Carousel/4.jpg')"  :style="{'height': deviceheight}"></b-carousel-slide>

    </b-carousel>

  </div>
</template>

<script>
export default {
  data () {
    return {
       deviceheight: '', 
      slide: 0,
      sliding: null
    }
  },
     mounted:function(){
      this.heighter() //heighter will execute at pageload
    },
  methods: {
         heighter () {
        this.deviceheight = window.innerHeight+'px';
      },
    onSlideStart (slide) {
      this.sliding = true
    },
    onSlideEnd (slide) {
      this.sliding = false
    }
  }
}
</script>
<!-- carousel-1.vue -->
<style>
.saeed-castel{
  background-color: black;
}
</style>

arshivbastian / vue

Add Carousel in page #8