タグ: flickr

先週は宇都宮と日光へ -2020年秋の紅葉-(2日目)

、、、
kentarok@cdbk.net

IMG3968 1

2日目。(1日目はこちら)

ひとまず、宇都宮駅から日光駅へ

この日は2020年秋の日光の紅葉をということで6時半前の宇都宮発日光行きの電車で日光駅へ。

少しややこしいのですが、JRと東武鉄道でJRは宇都宮、東武鉄道は東武宇都宮駅があり、JRの場合は宇都宮からJR日光線で終点の日光駅まで、東武鉄道の場合は宇都宮駅からバスに乗って東武宇都宮駅へ行き、そこから新栃木へ電車で行き、そこから東武日光線で東武日光駅に行くルートになります。

続きを読む “先週は宇都宮と日光へ -2020年秋の紅葉-(2日目)”

先週は宇都宮と日光へ(1日目)

、、
kentarok@cdbk.net

IMG3663 1

先週後半に栃木県の宇都宮と日光に行ってきました。

もともとGoToキャンペーンで行けるところを探していて、よく乗っている電車の終点が宇都宮だったのでそこに決め、せっかく行くので日光へも行ってみようということで決めた今回の旅行でした。

続きを読む “先週は宇都宮と日光へ(1日目)”

Nuxtとvue-carouselを使ってFlickrの写真をサイトトップに実装する

、
kentarok@cdbk.net

前回に続き、次はサイトトップで実装しているカルーセルについて。

Photographyでは<li>を反復させているものをvue-carouselプラグインをインポートして<slide>を反復するように変更するのみです。
その際、slideとcarouselがうまく行かないことがあるので

nuxt.jsにvue-carouselを導入してスライダーを作成
Nuxtでvue-carouselを使用していたら’ReferenceError: window is not defined’が出たお話

などなど参考に別途インポートすると動くと思われます。

実際のコードのサンプルは以下

<template>
  <carousel :navigation-enabled="true" :per-page="1" :loop="true" :scrollPerPage="true" :autoplay="true" :autoplayHoverPause="true"  :autoplayTimeout="5000" :paginationPadding="4">
    <slide v-for="(photo, index) in data['photo']" :key="photo.id">
      <img :data-src="photo['url_l']" :width="photo['width_l']" :height="photo['height_l']" :alt="photo['title']" v-lazy-load>
    </slide>
  </carousel>
</template>
<script>
import Carousel from '~/components/vue-carousel/Carousel.vue'
import Slide from '~/components/vue-carousel/Slide.vue'
export default {
  components: {
    Carousel,
    Slide
  },
  data() {
    return {
      data:{}
    }
  },
  async mounted() {
      const url = 'https://www.flickr.com/services/rest/?{{flickrAPI}};
      const data = await this.$jsonp(url, {
        callbackName: 'getWall'
      });
      return this.data = data.photoset;
  },
}
</script>