投稿ひとつずつにカルーセルを行う

Question

やりたいこと

ツイッターライクなアプリを作成中です。
画像を投稿できるようにし、複数枚投稿した際には、スマホ用にカルーセルを使って画像を見れるようにしようと思ったのですが、うまくいかず困っております。
画像の切替自体はできるのですが、切替用のボタンがうまく動いてくれません。
idを一意になるよう設定したのですが、users/1#karuseru_1といった形でGETのリクエストが行われており、
ページの更新のようなものが行われてしまいました。

_micropost.html.slim

.post
  .row
    .col-md-2.col-xs-6
      .prof
        = image_tag micropost.user.picture.url,:size =>'50x50', :class => "img-circle"
        = micropost.user.name
        = micropost.id
    .col-md-10.col-xs-6
      -if current_user?(micropost.user)
        .post-menu
          .btn-group role="group"
            = link_to edit_micropost_path(micropost),class: 'btn btn-default' do
              span.glyphicon.glyphicon-pencil aria-hidden="true"
            = link_to micropost, method: :delete,class: 'btn btn-default' do
              span.glyphicon.glyphicon-trash aria-hidden="true"

  .row
    .col-md-10.col-md-offset-2.col-xs-12
      .balloon1-left
        p = micropost.content
  .row
    .col-md-10.col-md-offset-2.col-xs-12.pics
      div id="karuseru_#{micropost.id}" class="carousel.slide" data-ride="carousel"
        .carousel-inner role="listbox"
          .item.active
            = image_tag micropost.user.picture.url,:size =>'50x50', :class => "img-circle"
          -if micropost.pictures?
            -micropost.pictures.each do |p|

             
              .item
                =image_tag p.url, multiple: true,class: "mwidth"
        a.left.carousel-control href="#karuseru_#{micropost.id}" data-slide="prev"
          span.glyphicon.glyphicon-chevron-left aria-hidden="true"
        a.right.carousel-control href="#karuseru_#{micropost.id}"data-slide="next"
          span.glyphicon.glyphicon-chevron-right aria-hidden="true"


  - if logged_in?
    .row
      div id="likes_buttons_#{micropost.id}" class="post-menu2"
        = render 'likes/like', micropost: micropost