paulransfield

link(href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400" rel="stylesheet")


h1 Vue.js Card Carousel
script#v-carousel(type="x/template")
  .card-carousel-wrapper
    .card-carousel--nav__left(
      @click="moveCarousel(-1)"
      :disabled="atHeadOfList"
    )

paulransfield

<div id="app">
    <div class="app-container">
        <div class="header">
            Featured Article
        </div>
        <div class="bkg-image"></div>
        <div class="content-container">Crazed squirrel steals peoples nutz!</div>
        <social-share :distance="150" :scale="0.8">
            <button class="share-button" slot="social-item"><i class="fa fa-facebook" aria-hidden="true"></i></button>
            <button class="share-button" slot="social-item"><i class="fa fa-twitter" aria-hidden="true"></i></button>

paulransfield

<header>
	<h1>Native Javascript exercises</h1>
</header>
<div class="slide">
	<div class="slide-content">
		<h2 id="change-text">Slide1</h2>
	</div>
	<div class="tool-bar">
		<div class="nav">
			<div id="prev">◀︎</div>

paulransfield

Buddha wise words 🙏🏻

As I was playing around with a javascript shortcut action for my ios devices, I thought that it might as well be turned into a pen also :-)

If you also want to experiment with coding javascript on iOS - take a look at this brilliant app: https://scriptable.app/

Click in left side to goto previous quote, click right side to goto next quote. Click the "Random" button for random quote. Click yellow tag to goto first quote with that tag. Click the "Copy" button to copy quote to clipboard,

Keyboard shortcuts: "left arrow" = Previous quote

paulransfield

<div class="slideshow">
  <div class="slideshow__container js-slideshow">
    <img
      v-for="slide, index in slides"
      :key="slide.id"
      :src="slide.url"
      :alt="slide.title"
      :class="{ active: isActive(index) }"
      @mouseover="stopRotation"
      @mouseout="startRotation"

paulransfield

<div id="app">
  <div class="app__phone">
    <div class="phone-header">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/Instagram_logo.png" />
      <p class="cancel-cta" v-if="step === 2 || step === 3" @click="goToHome">Cancel</p>
      <p class="next-cta" v-if="step === 2" @click="step++">Next</p>
      <p class="next-cta" v-if="step === 3" @click="sharePost">Share</p>
    </div>
    <transition name="fade">
      <div class="feed" v-if="step === 1" v-dragscroll.y="true">

paulransfield

CSS image slider w/ next/prev buttons

A 100% pure CSS image slider with previous/next buttons and image transitions.

Updated with simplified HTML and CSS, better image transitions and resized images.

A Pen by Pascal Bachmann on CodePen.

License.

paulransfield

Bubble Slideshow Component

This is a Vue component that uses clip-path for an interesting slideshow transition effect.

A Pen by Erik Jung on CodePen.

License.

paulransfield

<div id="slider">  
  <div class="slider">
    <ul class="slides" :style="{left:-width*current+'px'}">
      <li v-for="(slide,i) in slides">
        <img :src="slide" alt="">
      </li>
    </ul>
    <ul class="bullets">
      <li v-for="(slide,i) in slides" @click="selectSlide(i)" v-html="i==current ? '&#9679;' : '&omicron;'"></li>
    </ul>

paulransfield

function random_from_array(images){
  return images[Math.floor(Math.random() * images.length)];
}

const aet = ["a", "b", "c"];

random_from_array(aet);

function currWeek(year,month,day) {